react-restyle-components 0.4.46 → 0.4.47

package/lib/src/core-components/src/utils/hooks/useHoverState.js

@@ -1,36 +1 @@
-import { useState, useCallback, useEffect } from 'react';
-export const useHoverState = (disabled = false) => {
-    const [isHovered, setIsHovered] = useState(false);
-    const [isActive, setIsActive] = useState(false);
-    const onMouseOver = useCallback(() => {
-        setIsHovered(true);
-    }, []);
-    const onMouseOut = useCallback(() => {
-        setIsHovered(false);
-    }, []);
-    const onMouseDown = useCallback(() => {
-        setIsActive(true);
-    }, []);
-    const onMouseUp = useCallback(() => {
-        setIsActive(false);
-    }, []);
-    useEffect(() => {
-        const event = () => {
-            if (isActive) {
-                onMouseUp();
-            }
-        };
-        document.addEventListener('mouseup', event);
-        return () => {
-            document.removeEventListener('mouseup', event);
-        };
-    }, [isActive, onMouseUp]);
-    const hoverState = disabled
-        ? 'disabled'
-        : isActive
-            ? 'active'
-            : isHovered
-                ? 'hover'
-                : 'default';
-    return { hoverState, onMouseOver, onMouseOut, onMouseDown, onMouseUp };
-};
+"use strict";import{useState as r,useCallback as e,useEffect as d}from"react";export const useHoverState=(c=!1)=>{const[a,o]=r(!1),[t,n]=r(!1),v=e(()=>{o(!0)},[]),f=e(()=>{o(!1)},[]),i=e(()=>{n(!0)},[]),s=e(()=>{n(!1)},[]);return d(()=>{const u=()=>{t&&s()};return document.addEventListener("mouseup",u),()=>{document.removeEventListener("mouseup",u)}},[t,s]),{hoverState:c?"disabled":t?"active":a?"hover":"default",onMouseOver:v,onMouseOut:f,onMouseDown:i,onMouseUp:s}};

package/lib/src/core-components/src/utils/hooks/useId.js

@@ -1,7 +1 @@
-// import { useId as useReachId } from '@reach/auto-id';
-import { useId as useReactId } from 'react';
-const PREFIX = 'tech-abl-ui';
-export const useId = (prefix, id) => {
-    const randId = `${PREFIX}-${prefix}-${useReactId()}`;
-    return id ?? randId;
-};
+"use strict";import{useId as o}from"react";const r="tech-abl-ui";export const useId=(t,e)=>{const s=`${r}-${t}-${o()}`;return e??s};

package/lib/src/core-components/src/utils/hooks/useIsBrowser.js

@@ -1,11 +1 @@
-import { useEffect, useState } from 'react';
-// sometimes components cannot be rendered on the server.
-// so using `useEffect` ensures that the code is only rendered on the client side
-// use this hook to avoid hydration errors
-export const useIsBrowser = () => {
-    const [isBrowser, setIsBrowser] = useState(false);
-    useEffect(() => {
-        setIsBrowser(true);
-    }, []);
-    return isBrowser;
-};
+"use strict";import{useEffect as r,useState as t}from"react";export const useIsBrowser=()=>{const[e,s]=t(!1);return r(()=>{s(!0)},[]),e};

package/lib/src/core-components/src/utils/hooks/useMediaQuery.js

@@ -1,16 +1 @@
-import { useEffect, useState } from 'react';
-export const useMediaQuery = (query) => {
-    if (typeof window === 'undefined')
-        return false;
-    const [matches, setMatches] = useState(false);
-    useEffect(() => {
-        const media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        window.addEventListener('resize', listener);
-        return () => window.removeEventListener('resize', listener);
-    }, [matches, query]);
-    return matches;
-};
+"use strict";import{useEffect as r,useState as a}from"react";export const useMediaQuery=s=>{if(typeof window>"u")return!1;const[e,n]=a(!1);return r(()=>{const t=window.matchMedia(s);t.matches!==e&&n(t.matches);const i=()=>n(t.matches);return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[e,s]),e};

package/lib/src/core-components/src/utils/hooks/useOverflow.js

@@ -1,22 +1 @@
-import { useState } from 'react';
-import { useSafeLayoutEffect } from './useSafeLayoutEffect';
-export const useOverflow = (ref) => {
-    const [isOverflow, setIsOverflow] = useState(false);
-    useSafeLayoutEffect(() => {
-        const { current } = ref;
-        const trigger = () => {
-            if (!current)
-                return;
-            const hasOverflow = current.scrollHeight > current.clientHeight;
-            setIsOverflow(hasOverflow);
-        };
-        let observer;
-        if (current) {
-            observer = new ResizeObserver(trigger);
-            observer.observe(current);
-            trigger();
-        }
-        return () => observer?.disconnect();
-    });
-    return isOverflow;
-};
+"use strict";import{useState as c}from"react";import{useSafeLayoutEffect as i}from"./useSafeLayoutEffect";export const useOverflow=o=>{const[s,n]=c(!1);return i(()=>{const{current:e}=o,t=()=>{if(!e)return;const f=e.scrollHeight>e.clientHeight;n(f)};let r;return e&&(r=new ResizeObserver(t),r.observe(e),t()),()=>r?.disconnect()}),s};

package/lib/src/core-components/src/utils/hooks/useSafeLayoutEffect.js

@@ -1,5 +1 @@
-import React from 'react';
-/**
- * Version of useLayoutEffect that doesn't throw errors in SSR.
- */
-export const useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+"use strict";import e from"react";export const useSafeLayoutEffect=typeof window<"u"?e.useLayoutEffect:e.useEffect;

package/lib/src/core-components/src/utils/hooks/useScrollingUp.js

@@ -1,18 +1 @@
-import { useEffect, useRef, useState } from 'react';
-export const useScrollingUp = (initialState = false) => {
-    if (typeof window === 'undefined')
-        return initialState;
-    const [scrollingUp, setScrollingUp] = useState(initialState);
-    const prevScroll = useRef(window.scrollY);
-    useEffect(() => {
-        const handleScroll = () => {
-            const currScroll = window.pageYOffset;
-            const isScrolled = prevScroll.current > currScroll;
-            setScrollingUp(isScrolled);
-            prevScroll.current = currScroll;
-        };
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, []);
-    return scrollingUp;
-};
+"use strict";import{useEffect as c,useRef as i,useState as u}from"react";export const useScrollingUp=(e=!1)=>{if(typeof window>"u")return e;const[s,l]=u(e),r=i(window.scrollY);return c(()=>{const o=()=>{const n=window.pageYOffset,t=r.current>n;l(t),r.current=n};return window.addEventListener("scroll",o,{passive:!0}),()=>window.removeEventListener("scroll",o)},[]),s};

package/lib/src/core-components/src/utils/hooks/useTrapFocus.js

@@ -1,30 +1 @@
-import { useEffect } from 'react';
-export const keyDownHandler = (firstElement, lastElement, e) => {
-    if (e.key !== 'Tab')
-        return;
-    if (!e.shiftKey && document.activeElement === lastElement) {
-        firstElement.focus();
-        e.preventDefault();
-    }
-    if (e.shiftKey && document.activeElement === firstElement) {
-        lastElement.focus();
-        e.preventDefault();
-    }
-};
-const selectors = [
-    'a[href]',
-    'button:not([disabled])',
-    'textarea',
-    'input',
-    'select',
-];
-export const useTrapFocus = (ref) => {
-    useEffect(() => {
-        const focusableElements = ref?.current?.querySelectorAll(selectors.join(', '));
-        const firstElement = focusableElements?.[0];
-        const lastElement = focusableElements?.[focusableElements.length - 1];
-        const boundKeydownHandler = keyDownHandler.bind(null, firstElement, lastElement);
-        ref?.current?.addEventListener('keydown', boundKeydownHandler);
-        return () => ref?.current?.removeEventListener('keydown', boundKeydownHandler);
-    }, [ref?.current]);
-};
+"use strict";import{useEffect as c}from"react";export const keyDownHandler=(e,n,t)=>{t.key==="Tab"&&(!t.shiftKey&&document.activeElement===n&&(e.focus(),t.preventDefault()),t.shiftKey&&document.activeElement===e&&(n.focus(),t.preventDefault()))};const s=["a[href]","button:not([disabled])","textarea","input","select"];export const useTrapFocus=e=>{c(()=>{const n=e?.current?.querySelectorAll(s.join(", ")),t=n?.[0],r=n?.[n.length-1],o=keyDownHandler.bind(null,t,r);return e?.current?.addEventListener("keydown",o),()=>e?.current?.removeEventListener("keydown",o)},[e?.current])};

package/lib/src/core-components/src/utils/hooks/useWindowDimensions.js

@@ -1,23 +1 @@
-import { useState, useEffect } from 'react';
-function getWindowDimensions() {
-    const { innerWidth: width, innerHeight: height } = window;
-    return {
-        width,
-        height,
-    };
-}
-export function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = useState({
-        width: 0,
-        height: 0,
-    });
-    useEffect(() => {
-        setWindowDimensions(getWindowDimensions());
-        function handleResize() {
-            setWindowDimensions(getWindowDimensions());
-        }
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    return windowDimensions;
-}
+"use strict";import{useState as o,useEffect as s}from"react";function t(){const{innerWidth:n,innerHeight:e}=window;return{width:n,height:e}}export function useWindowDimensions(){const[n,e]=o({width:0,height:0});return s(()=>{e(t());function i(){e(t())}return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),n}

package/lib/src/core-components/src/utils/index.js

@@ -1,9 +1 @@
-export * from './utility.util';
-export * from './context';
-export * from './helpers';
-export * from './hooks';
-export * from './stories';
-export * from './styling';
-export * from './testing';
-export * from './abstracts';
-export { tokens } from './designTokens';
+"use strict";export*from"./utility.util";export*from"./context";export*from"./helpers";export*from"./hooks";export*from"./stories";export*from"./styling";export*from"./testing";export*from"./abstracts";export{tokens}from"./designTokens";

package/lib/src/core-components/src/utils/stories/Wrappers.js

@@ -1,47 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from 'styled-components';
-export const Wrappers = {
-    Default: styled.div `
+"use strict";import{jsx as r}from"react/jsx-runtime";import{styled as e}from"styled-components";export const Wrappers={Default:e.div`
     display: flex;
     justify-content: flex-start;
     padding: 2rem;
-  `,
-    Dashed: styled.div `
+  `,Dashed:e.div`
     margin: auto;
-    ${({ $width }) => $width && `width: ${$width};`}
+    ${({$width:i})=>i&&`width: ${i};`}
     border: 2px dashed var(--aui-primary);
     border-radius: 8px;
     padding: 8px;
-  `,
-    TextInput: styled.div `
+  `,TextInput:e.div`
     width: 250px;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin: auto;
-  `,
-    Modal: styled.div `
+  `,Modal:e.div`
     height: 100%;
     margin: -1rem;
-  `,
-    Row: styled.div `
+  `,Row:e.div`
     max-width: 100%;
     flex-wrap: wrap;
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: center;
-  `,
-    Test: styled.div `
+  `,Test:e.div`
     display: flex;
     flex-direction: column;
     gap: 1rem;
     width: min(100%, 600px);
-  `,
-};
-export const Decorators = Object.entries(Wrappers).reduce((acc, [title, Wrapper]) => ({
-    ...acc,
-    [title]: (Story) => (_jsx(Wrapper, { children: _jsx(Story, {}) })),
-}), {}
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-);
+  `},Decorators=Object.entries(Wrappers).reduce((i,[t,a])=>({...i,[t]:d=>r(a,{children:r(d,{})})}),{});

package/lib/src/core-components/src/utils/stories/cleanProps.js

@@ -1,5 +1 @@
-export function cleanProps(object) {
-    return Object.entries(object)
-        .filter(([, val]) => val !== undefined)
-        .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});
-}
+"use strict";export function cleanProps(n){return Object.entries(n).filter(([,e])=>e!==void 0).reduce((e,[r,t])=>({...e,[r]:t}),{})}

package/lib/src/core-components/src/utils/stories/index.js

@@ -1,4 +1 @@
-export * from './view-ports';
-export * from './cleanProps';
-export * from './sleep';
-export * from './Wrappers';
+"use strict";export*from"./view-ports";export*from"./cleanProps";export*from"./sleep";export*from"./Wrappers";

package/lib/src/core-components/src/utils/stories/sleep.js

@@ -1,4 +1 @@
-// https://stackoverflow.com/a/39914235
-export async function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
+"use strict";export async function sleep(e){return new Promise(n=>setTimeout(n,e))}

package/lib/src/core-components/src/utils/stories/view-ports.js

@@ -1,50 +1 @@
-export const VIEWPORTS = {
-    sm: {
-        name: 'SM',
-        styles: {
-            height: '100%',
-            width: '375px',
-        },
-        type: 'mobile',
-    },
-    md: {
-        name: 'MD',
-        styles: {
-            height: '100%',
-            width: '768px',
-        },
-        type: 'mobile',
-    },
-    md2: {
-        name: 'MD2',
-        styles: {
-            height: '100%',
-            width: '1024px',
-        },
-        type: 'mobile',
-    },
-    lg: {
-        name: 'LG',
-        styles: {
-            height: '100%',
-            width: '1280px',
-        },
-        type: 'mobile',
-    },
-    xl: {
-        name: 'XL',
-        styles: {
-            height: '100%',
-            width: '1440px',
-        },
-        type: 'mobile',
-    },
-    xxl: {
-        name: 'XXL',
-        styles: {
-            height: '100%',
-            width: '1920px',
-        },
-        type: 'mobile',
-    },
-};
+"use strict";export const VIEWPORTS={sm:{name:"SM",styles:{height:"100%",width:"375px"},type:"mobile"},md:{name:"MD",styles:{height:"100%",width:"768px"},type:"mobile"},md2:{name:"MD2",styles:{height:"100%",width:"1024px"},type:"mobile"},lg:{name:"LG",styles:{height:"100%",width:"1280px"},type:"mobile"},xl:{name:"XL",styles:{height:"100%",width:"1440px"},type:"mobile"},xxl:{name:"XXL",styles:{height:"100%",width:"1920px"},type:"mobile"}};

package/lib/src/core-components/src/utils/styling/calcWidthOfColumns.js

@@ -1,5 +1 @@
-export const calcWidthOfColumns = ({ columns, totalColumns, margin, gutter, maxWidth = '100%', }) => {
-    const internalGutters = (columns - 1) * gutter;
-    const guttersAndMargin = 2 * margin + (totalColumns - 1) * gutter;
-    return `calc(${internalGutters}px + ${columns} * (${maxWidth} - ${guttersAndMargin}px) / ${totalColumns})`;
-};
+"use strict";export const calcWidthOfColumns=({columns:n,totalColumns:t,margin:r,gutter:c,maxWidth:$="100%"})=>{const e=(n-1)*c,s=2*r+(t-1)*c;return`calc(${e}px + ${n} * (${$} - ${s}px) / ${t})`};

package/lib/src/core-components/src/utils/styling/createGridContainer.js

@@ -1,15 +1,9 @@
-export const createGridContainer = (
-/* Gap between columns, also known as "gutter" */
-gridLayoutGap, 
-/* Max number of columns in a row */
-gridColumnCount, 
-/* Min width of grid items before they wrap to a new row */
-gridItemMinWidth) => `
-  --gap-count: calc(${gridColumnCount} - 1);
-  --total-gap-width: calc(var(--gap-count) * ${gridLayoutGap});
-  --grid-item--max-width: calc((100% - var(--total-gap-width)) / ${gridColumnCount});
+"use strict";export const createGridContainer=(a,t,i)=>`
+  --gap-count: calc(${t} - 1);
+  --total-gap-width: calc(var(--gap-count) * ${a});
+  --grid-item--max-width: calc((100% - var(--total-gap-width)) / ${t});
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(max(${gridItemMinWidth}, var(--grid-item--max-width)), 1fr));
-  grid-gap: ${gridLayoutGap};
+  grid-template-columns: repeat(auto-fill, minmax(max(${i}, var(--grid-item--max-width)), 1fr));
+  grid-gap: ${a};
 `;

package/lib/src/core-components/src/utils/styling/createTransition.js

@@ -1,8 +1,3 @@
-import { css } from 'styled-components';
-export const transitionDuration = '0.2s';
-export const transitionTimingFunction = 'ease-in-out';
-export const createTransition = ({ properties, duration = transitionDuration, timingFunction = transitionTimingFunction, }) => css `
-  transition: ${properties
-    .map((property) => `${property} ${duration} ${timingFunction}`)
-    .join(', ')};
+"use strict";import{css as r}from"styled-components";export const transitionDuration="0.2s",transitionTimingFunction="ease-in-out",createTransition=({properties:t,duration:n=transitionDuration,timingFunction:o=transitionTimingFunction})=>r`
+  transition: ${t.map(i=>`${i} ${n} ${o}`).join(", ")};
 `;

package/lib/src/core-components/src/utils/styling/forwardProps.js

@@ -1,10 +1 @@
-import isPropValid from '@emotion/is-prop-valid';
-// from styled-components docs: https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default
-export const dontForwardProps = () => ({
-    shouldForwardProp: (propName, target) => {
-        if (typeof target === 'string') {
-            return isPropValid(propName);
-        }
-        return true;
-    },
-});
+"use strict";import t from"@emotion/is-prop-valid";export const dontForwardProps=()=>({shouldForwardProp:(r,o)=>typeof o=="string"?t(r):!0});

package/lib/src/core-components/src/utils/styling/index.js

@@ -1,5 +1 @@
-export * from './calcWidthOfColumns';
-export * from './createGridContainer';
-export * from './createTransition';
-export * from './forwardProps';
-export * from './pxToRem';
+"use strict";export*from"./calcWidthOfColumns";export*from"./createGridContainer";export*from"./createTransition";export*from"./forwardProps";export*from"./pxToRem";

package/lib/src/core-components/src/utils/styling/pxToRem.js

@@ -1,6 +1 @@
-export function pxToRem(sizeInPx) {
-    const computedStyle = typeof window !== 'undefined'
-        ? parseFloat(getComputedStyle(document.documentElement).fontSize)
-        : 16;
-    return sizeInPx / computedStyle;
-}
+"use strict";export function pxToRem(e){const t=typeof window<"u"?parseFloat(getComputedStyle(document.documentElement).fontSize):16;return e/t}

package/lib/src/core-components/src/utils/testing/getComputedStyle.js

@@ -1,3 +1 @@
-export function getComputedStyle(element, property) {
-    return window.getComputedStyle(element)[property];
-}
+"use strict";export function getComputedStyle(t,e){return window.getComputedStyle(t)[e]}

package/lib/src/core-components/src/utils/testing/index.js

@@ -1 +1 @@
-export * from './getComputedStyle';
+"use strict";export*from"./getComputedStyle";

package/lib/src/core-components/src/utils/utility.util.js

@@ -1,14 +1 @@
-import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
-export const cn = (...inputs) => {
-    return twMerge(clsx(inputs));
-};
-export const mapToArray = (arr) => {
-    const res = [];
-    arr.forEach(function (obj, index) {
-        const key = Object.keys(obj)[0];
-        const value = key;
-        res.push([value, obj[key]]);
-    });
-    return res;
-};
+"use strict";import c from"clsx";import{twMerge as s}from"tailwind-merge";export const cn=(...r)=>s(c(r)),mapToArray=r=>{const t=[];return r.forEach(function(o,p){const e=Object.keys(o)[0],n=e;t.push([n,o[e]])}),t};