@atom-learning/components 5.3.0 → 5.4.0

package/dist/stitches.js

@@ -0,0 +1,2 @@
+import{createStitches as m,defaultThemeMap as o}from"@atom-learning/stitches-react";import*as r from"@atom-learning/theme/lib/theme-atom";import{themeMap as d}from"@atom-learning/theme/theme-map";const e={bg:t=>({background:t}),size:t=>({height:t,width:t}),p:t=>({padding:t}),pt:t=>({paddingTop:t}),pr:t=>({paddingRight:t}),pb:t=>({paddingBottom:t}),pl:t=>({paddingLeft:t}),px:t=>({paddingLeft:t,paddingRight:t}),py:t=>({paddingTop:t,paddingBottom:t}),m:t=>({margin:t}),mt:t=>({marginTop:t}),mr:t=>({marginRight:t}),mb:t=>({marginBottom:t}),ml:t=>({marginLeft:t}),mx:t=>({marginLeft:t,marginRight:t}),my:t=>({marginTop:t,marginBottom:t})},i={sm:"(min-width: 550px)",md:"(min-width: 800px)",lg:"(min-width: 1100px)",xl:"(min-width: 1350px)",reducedMotion:"(prefers-reduced-motion)",allowMotion:"(prefers-reduced-motion: no-preference)",hover:"(hover: hover)"},p=m({theme:r,themeMap:{...o,...d},utils:e,media:i}),{css:n,getCssText:a,createTheme:g,globalCss:h,keyframes:s,styled:c,theme:f}=p;export{g as createTheme,n as css,a as getCssText,h as globalCss,s as keyframes,i as media,c as styled,f as theme,e as utils};
+//# sourceMappingURL=stitches.js.map

package/dist/stitches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.js","sources":["../src/stitches.ts"],"sourcesContent":["import type {\n  CSS as StitchesCSS,\n  PropertyValue,\n  ScaleValue\n} from '@atom-learning/stitches-react'\nimport { createStitches, defaultThemeMap } from '@atom-learning/stitches-react'\nimport type { Theme } from '@atom-learning/theme/lib/theme-atom'\nimport * as atomTheme from '@atom-learning/theme/lib/theme-atom'\nimport { themeMap } from '@atom-learning/theme/theme-map'\n\nexport const utils = {\n  bg: (value: PropertyValue<'background'>) => ({\n    background: value\n  }),\n\n  size: (value: ScaleValue<'size'> | number | string) => ({\n    height: value,\n    width: value\n  }),\n\n  p: (value: ScaleValue<'space'> | number | string) => ({\n    padding: value\n  }),\n  pt: (value: ScaleValue<'space'> | number | string) => ({\n    paddingTop: value\n  }),\n  pr: (value: ScaleValue<'space'> | number | string) => ({\n    paddingRight: value\n  }),\n  pb: (value: ScaleValue<'space'> | number | string) => ({\n    paddingBottom: value\n  }),\n  pl: (value: ScaleValue<'space'> | number | string) => ({\n    paddingLeft: value\n  }),\n  px: (value: ScaleValue<'space'> | number | string) => ({\n    paddingLeft: value,\n    paddingRight: value\n  }),\n  py: (value: ScaleValue<'space'> | number | string) => ({\n    paddingTop: value,\n    paddingBottom: value\n  }),\n\n  m: (value: ScaleValue<'space'> | number | string) => ({\n    margin: value\n  }),\n  mt: (value: ScaleValue<'space'> | number | string) => ({\n    marginTop: value\n  }),\n  mr: (value: ScaleValue<'space'> | number | string) => ({\n    marginRight: value\n  }),\n  mb: (value: ScaleValue<'space'> | number | string) => ({\n    marginBottom: value\n  }),\n  ml: (value: ScaleValue<'space'> | number | string) => ({\n    marginLeft: value\n  }),\n  mx: (value: ScaleValue<'space'> | number | string) => ({\n    marginLeft: value,\n    marginRight: value\n  }),\n  my: (value: ScaleValue<'space'> | number | string) => ({\n    marginTop: value,\n    marginBottom: value\n  })\n}\n\nexport const media = {\n  sm: '(min-width: 550px)',\n  md: '(min-width: 800px)',\n  lg: '(min-width: 1100px)',\n  xl: '(min-width: 1350px)',\n  reducedMotion: '(prefers-reduced-motion)',\n  allowMotion: '(prefers-reduced-motion: no-preference)',\n  hover: '(hover: hover)'\n}\n\nconst stitchesConfig = createStitches({\n  theme: atomTheme as Theme,\n  themeMap: {\n    ...defaultThemeMap,\n    ...themeMap\n  },\n  utils,\n  media\n})\n\nexport const {\n  css,\n  getCssText,\n  createTheme,\n  globalCss,\n  keyframes,\n  styled,\n  theme\n} = stitchesConfig\n\nexport type CSS = StitchesCSS<typeof stitchesConfig>\n"],"names":["utils","value","media","stitchesConfig","createStitches","atomTheme","defaultThemeMap","themeMap","css","getCssText","createTheme","globalCss","keyframes","styled","theme"],"mappings":"oMAUO,MAAMA,EAAQ,CACnB,GAAKC,IAAwC,CAC3C,WAAYA,CACd,GAEA,KAAOA,IAAiD,CACtD,OAAQA,EACR,MAAOA,CACT,GAEA,EAAIA,IAAkD,CACpD,QAASA,CACX,GACA,GAAKA,IAAkD,CACrD,WAAYA,CACd,GACA,GAAKA,IAAkD,CACrD,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,cAAeA,CACjB,GACA,GAAKA,IAAkD,CACrD,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,YAAaA,EACb,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,WAAYA,EACZ,cAAeA,CACjB,GAEA,EAAIA,IAAkD,CACpD,OAAQA,CACV,GACA,GAAKA,IAAkD,CACrD,UAAWA,CACb,GACA,GAAKA,IAAkD,CACrD,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,aAAcA,CAChB,GACA,GAAKA,IAAkD,CACrD,WAAYA,CACd,GACA,GAAKA,IAAkD,CACrD,WAAYA,EACZ,YAAaA,CACf,GACA,GAAKA,IAAkD,CACrD,UAAWA,EACX,aAAcA,CAChB,EACF,EAEaC,EAAQ,CACnB,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,cAAe,2BACf,YAAa,0CACb,MAAO,gBACT,EAEMC,EAAiBC,EAAe,CACpC,MAAOC,EACP,SAAU,CACR,GAAGC,EACH,GAAGC,CACL,EACA,MAAAP,EACA,MAAAE,CACF,CAAC,EAEY,CACX,IAAAM,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,CACF,EAAIX"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './navigatorActions.types';
+export * from './polymorphicComponentProp.types';

package/dist/types/navigatorActions.types.d.ts

@@ -0,0 +1,4 @@
+export type NavigatorActions = {
+    onClick?: (...args: unknown[]) => void;
+    href?: string;
+};

package/dist/types/polymorphicComponentProp.types.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The goal of these types is to make sure that our polymorphic components accept
+ * the correct attributes, and any ref passed onto the polymorphic component has
+ * the correct type.
+ *
+ * For example, when you pass `as="a"`, it should accept an `href` attribute and,
+ * the `ref` should be of type `HTMLAnchorElement`.
+ *
+ * If you pass `as="button"` instead, it should not accept `href` and the `ref`
+ * should be of type `HTMLButtonElement`.
+ *
+ *
+ * Taken from:
+ * https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/
+ */
+/**
+ * A generic that is used to capture the `as` prop value
+ */
+type AsProp<C extends React.ElementType> = {
+    as?: C;
+};
+/**
+ * A type of the `as` prop, plus any custom defined props.
+ */
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * Adds a typed `as` prop to a list of props.
+ */
+type PolymorphicComponentProp<C extends React.ElementType, Props = Record<string, unknown>> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+/**
+ * Type to capture the `ref` prop type from the element type
+ * passed into the `as` prop.
+ */
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+/**
+ * Usage example:
+ *
+ * ```tsx
+ * type MyComponentProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
+ *   C,
+ *   { myProp: string }
+ * >
+ *
+ * const MyComponent: <C extends React.ElementType = 'span'>(
+ *   props: MyComponentProps<C>
+ * ) => React.ReactElement | null = React.forwardRef(
+ *   <C extends React.ElementType = 'span'>(
+ *     { children, as, myProp }: MyComponentProps<C>,
+ *     ref?: MyComponentProps<C>['ref']
+ *   ) => {
+ *     ...
+ *   }
+ * )
+ * ```
+ */
+export type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = Record<string, unknown>> = PolymorphicComponentProp<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+export {};

package/dist/utilities/create-theme-variants/createThemeVariants.d.ts

@@ -0,0 +1,22 @@
+import { Theme } from '@atom-learning/theme/lib/theme-atom';
+import { CSS, theme } from '../../stitches';
+/**
+ * Generates a Stitches variants object based on keys in our theme.
+ * You can use the string `$key` in your CSS object, which will be replaced
+ * with the token from our theme.
+ *
+ *
+ * @example
+ * ```ts
+ * createThemeVariants('space', { p: '$key' })
+ *
+ * // Result:
+ * // {
+ * //   0: { p: '$space$0' },
+ * //   1: { p: '$space$1' },
+ * //   2: { p: '$space$2' },
+ * //   ...etc
+ * // }
+ * ```
+ */
+export declare const createThemeVariants: <ThemeProperty extends keyof Theme>(themeProperty: ThemeProperty, styles: CSS) => Record<keyof (typeof theme)[ThemeProperty], CSS>;

package/dist/utilities/create-theme-variants/createThemeVariants.js

@@ -0,0 +1,2 @@
+import{theme as c}from"../../stitches.js";const s=(e,t)=>Object.keys(c[e]).reduce((a,r)=>({...a,[r]:JSON.parse(JSON.stringify(t).replace(/\$key/g,`$${e}$${r}`))}),{});export{s as createThemeVariants};
+//# sourceMappingURL=createThemeVariants.js.map

package/dist/utilities/create-theme-variants/createThemeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThemeVariants.js","sources":["../../../src/utilities/create-theme-variants/createThemeVariants.ts"],"sourcesContent":["import { Theme } from '@atom-learning/theme/lib/theme-atom'\n\nimport { CSS, theme } from '../../stitches'\n\n/**\n * Generates a Stitches variants object based on keys in our theme.\n * You can use the string `$key` in your CSS object, which will be replaced\n * with the token from our theme.\n *\n *\n * @example\n * ```ts\n * createThemeVariants('space', { p: '$key' })\n *\n * // Result:\n * // {\n * //   0: { p: '$space$0' },\n * //   1: { p: '$space$1' },\n * //   2: { p: '$space$2' },\n * //   ...etc\n * // }\n * ```\n */\nexport const createThemeVariants = <ThemeProperty extends keyof Theme>(\n  themeProperty: ThemeProperty,\n  styles: CSS\n): Record<keyof typeof theme[ThemeProperty], CSS> =>\n  Object.keys(theme[themeProperty]).reduce(\n    (acc, key) => ({\n      ...acc,\n      [key]: JSON.parse(\n        JSON.stringify(styles).replace(/\\$key/g, `$${themeProperty}$${key}`)\n      )\n    }),\n    {}\n  ) as Record<keyof typeof theme[ThemeProperty], CSS>\n"],"names":["createThemeVariants","themeProperty","styles","theme","acc","key"],"mappings":"0CAuBa,MAAAA,EAAsB,CACjCC,EACAC,IAEA,OAAO,KAAKC,EAAMF,EAAc,EAAE,OAChC,CAACG,EAAKC,KAAS,CACb,GAAGD,EACH,CAACC,GAAM,KAAK,MACV,KAAK,UAAUH,CAAM,EAAE,QAAQ,SAAU,IAAID,KAAiBI,GAAK,CACrE,CACF,GACA,CACF,CAAA"}

package/dist/utilities/create-theme-variants/index.d.ts

@@ -0,0 +1 @@
+export { createThemeVariants } from './createThemeVariants';

package/dist/utilities/css-wrapper/CSSWrapper.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+type CssWrapperProps = {
+    css?: CSS;
+    children: React.ReactNode;
+};
+export declare const CSSWrapper: {
+    ({ css, children }: CssWrapperProps): React.ReactElement;
+    displayName: string;
+};
+export {};

package/dist/utilities/css-wrapper/CSSWrapper.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{Box as m}from"../../components/box/Box.js";const a=({css:r,children:t})=>r?e.createElement(m,{css:r},t):e.createElement(e.Fragment,null,t);a.displayName="CSSWrapper";export{a as CSSWrapper};
+//# sourceMappingURL=CSSWrapper.js.map

package/dist/utilities/css-wrapper/CSSWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSSWrapper.js","sources":["../../../src/utilities/css-wrapper/CSSWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport type { CSS } from '~/stitches'\n\ntype CssWrapperProps = {\n  css?: CSS\n  children: React.ReactNode\n}\n\nexport const CSSWrapper = ({\n  css,\n  children\n}: CssWrapperProps): React.ReactElement =>\n  css ? (\n    <Box css={css}>{children}</Box>\n  ) : (\n    // children could be multiple elements/components,\n    // so we need a fragment here.\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>{children}</>\n  )\n\nCSSWrapper.displayName = 'CSSWrapper'\n"],"names":["CSSWrapper","css","children","React","Box"],"mappings":"0EAUa,MAAAA,EAAa,CAAC,CACzB,IAAAC,EACA,SAAAC,CACF,IACED,EACEE,EAAA,cAACC,EAAA,CAAI,IAAKH,GAAMC,CAAS,EAKzBC,EAAA,cAAAA,EAAA,SAAA,KAAGD,CAAS,EAGhBF,EAAW,YAAc"}

package/dist/utilities/css-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { CSSWrapper } from './CSSWrapper';

package/dist/utilities/event/index.d.ts

@@ -0,0 +1 @@
+export { preventEvent } from './preventEvent';

package/dist/utilities/event/preventEvent.d.ts

@@ -0,0 +1 @@
+export declare const preventEvent: (event: React.PointerEvent | Event | React.SyntheticEvent) => void;

package/dist/utilities/event/preventEvent.js

@@ -0,0 +1,2 @@
+const t=e=>{e.preventDefault()};export{t as preventEvent};
+//# sourceMappingURL=preventEvent.js.map

package/dist/utilities/event/preventEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preventEvent.js","sources":["../../../src/utilities/event/preventEvent.ts"],"sourcesContent":["/*\nUsed to block default radix hover to open menu behaviour\nProps: https://github.com/radix-ui/primitives/issues/1630\n*/\nexport const preventEvent = (\n  event: React.PointerEvent | Event | React.SyntheticEvent\n): void => {\n  const e = event as Event\n  e.preventDefault()\n}\n"],"names":["preventEvent","event"],"mappings":"AAIO,MAAMA,EACXC,GACS,CACCA,EACR,eACJ,CAAA"}

package/dist/utilities/hooks/useCallbackRef.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare const useCallbackRef: () => [
+    React.MutableRefObject<HTMLElement | null>,
+    (HTMLElement: any) => void
+];
+export declare const useCallbackRefState: () => [
+    HTMLElement | null,
+    (HTMLElement: any) => void
+];

package/dist/utilities/hooks/useCallbackRef.js

@@ -0,0 +1,2 @@
+import*as t from"react";const n=()=>{const e=t.useRef(null),u=t.useCallback(l=>{l&&(e.current=l)},[]);return[e,u]},s=()=>{const[e,u]=t.useState(null),l=t.useCallback(a=>{a&&u(a)},[]);return[e,l]};export{n as useCallbackRef,s as useCallbackRefState};
+//# sourceMappingURL=useCallbackRef.js.map

package/dist/utilities/hooks/useCallbackRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCallbackRef.js","sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n  React.MutableRefObject<HTMLElement | null>,\n  (HTMLElement) => void\n] = () => {\n  const elRef = React.useRef<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) elRef.current = el\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n  HTMLElement | null,\n  (HTMLElement) => void\n] = () => {\n  const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) setElRef(el)\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n"],"names":["useCallbackRef","elRef","React","setElRefCallback","el","useCallbackRefState","setElRef"],"mappings":"wBAEa,MAAAA,EAGT,IAAM,CACR,MAAMC,EAAQC,EAAM,OAA2B,IAAI,EAE7CC,EAAmBD,EAAM,YAAaE,GAAO,CAC7CA,IAAIH,EAAM,QAAUG,EAC1B,EAAG,CAAA,CAAE,EAEL,MAAO,CAACH,EAAOE,CAAgB,CACjC,EAEaE,EAGT,IAAM,CACR,KAAM,CAACJ,EAAOK,CAAQ,EAAIJ,EAAM,SAA6B,IAAI,EAE3DC,EAAmBD,EAAM,YAAaE,GAAO,CAC7CA,GAAIE,EAASF,CAAE,CACrB,EAAG,CAAA,CAAE,EAEL,MAAO,CAACH,EAAOE,CAAgB,CACjC"}

package/dist/utilities/hooks/useIsMountedRef.d.ts

@@ -0,0 +1 @@
+export declare const useIsMountedRef: () => import("react").MutableRefObject<boolean | undefined>;

package/dist/utilities/hooks/useIsMountedRef.js

@@ -0,0 +1,2 @@
+import{useRef as r,useEffect as t}from"react";const u=()=>{const e=r();return t(()=>(e.current=!0,()=>{e.current=!1})),e};export{u as useIsMountedRef};
+//# sourceMappingURL=useIsMountedRef.js.map

package/dist/utilities/hooks/useIsMountedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMountedRef.js","sources":["../../../src/utilities/hooks/useIsMountedRef.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const useIsMountedRef = () => {\n  const isMountedRef = useRef<boolean>()\n\n  useEffect(() => {\n    isMountedRef.current = true\n    return () => {\n      isMountedRef.current = false\n    }\n  })\n\n  return isMountedRef\n}\n"],"names":["useIsMountedRef","isMountedRef","useRef","useEffect"],"mappings":"8CAEa,MAAAA,EAAkB,IAAM,CACnC,MAAMC,EAAeC,EAAgB,EAErC,OAAAC,EAAU,KACRF,EAAa,QAAU,GAChB,IAAM,CACXA,EAAa,QAAU,EACzB,EACD,EAEMA,CACT"}

package/dist/utilities/hooks/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+type TUseResizeObserverOptions = {
+    elements: (HTMLElement | undefined | null)[];
+    onResize: (entries: ResizeObserverEntry[]) => void;
+    delay?: number;
+};
+type TUseResizeObserverOutput = ResizeObserver | null;
+export declare const useResizeObserver: ({ delay, elements, onResize }: TUseResizeObserverOptions) => TUseResizeObserverOutput;
+export {};

package/dist/utilities/hooks/useResizeObserver.js

@@ -0,0 +1,2 @@
+import*as t from"react";import{debounce as u}from"throttle-debounce";const c=o=>{try{return new ResizeObserver(o)}catch{return null}},l=({delay:o=500,elements:n,onResize:s})=>{const e=t.useMemo(()=>c(u(o,s)),[o,s]);return t.useEffect(()=>(n.forEach(r=>{r&&(e==null||e.observe(r))}),()=>{n.forEach(r=>r&&(e==null?void 0:e.unobserve(r)))}),[e,n]),e};export{l as useResizeObserver};
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/utilities/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../../src/utilities/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\ntype TUseResizeObserverOptions = {\n  elements: (HTMLElement | undefined | null)[]\n  onResize: (entries: ResizeObserverEntry[]) => void\n  delay?: number\n}\n\ntype TUseResizeObserverOutput = ResizeObserver | null\n\nconst createResizeObserver = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\n  try {\n    return new ResizeObserver(callback)\n  } catch {\n    return null\n  }\n}\n\nexport const useResizeObserver = ({\n  delay = 500,\n  elements,\n  onResize\n}: TUseResizeObserverOptions): TUseResizeObserverOutput => {\n  const observer = React.useMemo(\n    () => createResizeObserver(debounce(delay, onResize)),\n    [delay, onResize]\n  )\n\n  React.useEffect(() => {\n    elements.forEach((element) => {\n      if (element) {\n        observer?.observe(element)\n      }\n    })\n\n    return () => {\n      elements.forEach((element) => element && observer?.unobserve(element))\n    }\n  }, [observer, elements])\n\n  return observer\n}\n"],"names":["createResizeObserver","callback","useResizeObserver","delay","elements","onResize","observer","React","debounce","element"],"mappings":"qEAWA,MAAMA,EACJC,GACG,CACH,GAAI,CACF,OAAO,IAAI,eAAeA,CAAQ,CACpC,OACE,OAAO,IACT,CACF,EAEaC,EAAoB,CAAC,CAChC,MAAAC,EAAQ,IACR,SAAAC,EACA,SAAAC,CACF,IAA2D,CACzD,MAAMC,EAAWC,EAAM,QACrB,IAAMP,EAAqBQ,EAASL,EAAOE,CAAQ,CAAC,EACpD,CAACF,EAAOE,CAAQ,CAClB,EAEA,OAAAE,EAAM,UAAU,KACdH,EAAS,QAASK,GAAY,CACxBA,IACFH,GAAA,MAAAA,EAAU,QAAQG,CAEtB,EAAA,CAAC,EAEM,IAAM,CACXL,EAAS,QAASK,GAAYA,IAAWH,GAAA,KAAA,OAAAA,EAAU,UAAUG,CAAAA,EAAQ,CACvE,GACC,CAACH,EAAUF,CAAQ,CAAC,EAEhBE,CACT"}

package/dist/utilities/hooks/useScrollPosition.d.ts

@@ -0,0 +1,11 @@
+type TUseScrollPositionOptions = {
+    element?: HTMLElement | null;
+    delay?: number;
+    delayMethod?: 'throttle' | 'debounce';
+};
+type TUseScrollPositionOutput = {
+    left: number;
+    top: number;
+};
+export declare const useScrollPosition: ({ element, delay, delayMethod }: TUseScrollPositionOptions) => TUseScrollPositionOutput;
+export {};

package/dist/utilities/hooks/useScrollPosition.js

@@ -0,0 +1,2 @@
+import{useState as c,useMemo as u,useEffect as f}from"react";import{debounce as d,throttle as i}from"throttle-debounce";const m=({element:e,delay:t=500,delayMethod:r="throttle"})=>{const[n,s]=c({left:0,top:0}),o=u(()=>r==="debounce"?d:i,[r]);return f(()=>{if(!e)return;const l=o(t,()=>{s({left:e.scrollLeft,top:e.scrollTop})});return e.addEventListener("scroll",l),()=>{e.removeEventListener("scroll",l)}},[e,o,t]),n};export{m as useScrollPosition};
+//# sourceMappingURL=useScrollPosition.js.map

package/dist/utilities/hooks/useScrollPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollPosition.js","sources":["../../../src/utilities/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype TUseScrollPositionOptions = {\n  element?: HTMLElement | null\n  delay?: number\n  delayMethod?: 'throttle' | 'debounce'\n}\n\ntype TUseScrollPositionOutput = {\n  left: number\n  top: number\n}\n\nexport const useScrollPosition = ({\n  element,\n  delay = 500,\n  delayMethod = 'throttle'\n}: TUseScrollPositionOptions): TUseScrollPositionOutput => {\n  const [scrollPosition, setScrollPosition] = useState({ left: 0, top: 0 })\n\n  const delayMethodFn = useMemo(\n    () => (delayMethod === 'debounce' ? debounce : throttle),\n    [delayMethod]\n  )\n\n  useEffect(() => {\n    if (!element) return\n\n    const handleScroll = delayMethodFn(delay, () => {\n      setScrollPosition({ left: element.scrollLeft, top: element.scrollTop })\n    })\n\n    element.addEventListener('scroll', handleScroll)\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll)\n    }\n  }, [element, delayMethodFn, delay])\n\n  return scrollPosition\n}\n"],"names":["useScrollPosition","element","delay","delayMethod","scrollPosition","setScrollPosition","useState","delayMethodFn","useMemo","debounce","throttle","useEffect","handleScroll"],"mappings":"8HAcaA,EAAoB,CAAC,CAChC,QAAAC,EACA,MAAAC,EAAQ,IACR,YAAAC,EAAc,UAChB,IAA2D,CACzD,KAAM,CAACC,EAAgBC,CAAiB,EAAIC,EAAS,CAAE,KAAM,EAAG,IAAK,CAAE,CAAC,EAElEC,EAAgBC,EACpB,IAAOL,IAAgB,WAAaM,EAAWC,EAC/C,CAACP,CAAW,CACd,EAEA,OAAAQ,EAAU,IAAM,CACd,GAAI,CAACV,EAAS,OAEd,MAAMW,EAAeL,EAAcL,EAAO,IAAM,CAC9CG,EAAkB,CAAE,KAAMJ,EAAQ,WAAY,IAAKA,EAAQ,SAAU,CAAC,CACxE,CAAC,EAED,OAAAA,EAAQ,iBAAiB,SAAUW,CAAY,EAExC,IAAM,CACXX,EAAQ,oBAAoB,SAAUW,CAAY,CACpD,CACF,EAAG,CAACX,EAASM,EAAeL,CAAK,CAAC,EAE3BE,CACT"}

package/dist/utilities/hooks/useSize.d.ts

@@ -0,0 +1,9 @@
+interface Size {
+    width: number | undefined;
+    height: number | undefined;
+}
+export declare const useSize: ({ element, delay }: {
+    element?: HTMLElement | null;
+    delay?: number;
+}) => Size;
+export {};

package/dist/utilities/hooks/useSize.js

@@ -0,0 +1,2 @@
+import{useState as n,useCallback as d,useMemo as r}from"react";import{useResizeObserver as h}from"./useResizeObserver.js";const u=({element:e,delay:t=500})=>{const[o,l]=n({width:void 0,height:void 0}),s=d(()=>{l({width:e==null?void 0:e.clientWidth,height:e==null?void 0:e.clientHeight})},[e]),i=r(()=>[e],[e]);return h({delay:t,elements:i,onResize:s}),o};export{u as useSize};
+//# sourceMappingURL=useSize.js.map

package/dist/utilities/hooks/useSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSize.js","sources":["../../../src/utilities/hooks/useSize.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\nimport { useResizeObserver } from './useResizeObserver'\n\ninterface Size {\n  width: number | undefined\n  height: number | undefined\n}\n\nexport const useSize = ({\n  element,\n  delay = 500\n}: {\n  element?: HTMLElement | null\n  delay?: number\n}): Size => {\n  const [size, setSize] = useState<Size>({\n    width: undefined,\n    height: undefined\n  })\n\n  const handleResize = useCallback(() => {\n    setSize({\n      width: element?.clientWidth,\n      height: element?.clientHeight\n    })\n  }, [element])\n\n  const elements = useMemo(() => [element], [element])\n\n  useResizeObserver({\n    delay,\n    elements: elements,\n    onResize: handleResize\n  })\n\n  return size\n}\n"],"names":["useSize","element","delay","size","setSize","useState","handleResize","useCallback","elements","useMemo","useResizeObserver"],"mappings":"0HASa,MAAAA,EAAU,CAAC,CACtB,QAAAC,EACA,MAAAC,EAAQ,GACV,IAGY,CACV,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,CACrC,MAAO,OACP,OAAQ,MACV,CAAC,EAEKC,EAAeC,EAAY,IAAM,CACrCH,EAAQ,CACN,MAAOH,GAAA,KAAA,OAAAA,EAAS,YAChB,OAAQA,GAAA,KAAA,OAAAA,EAAS,YACnB,CAAC,CACH,EAAG,CAACA,CAAO,CAAC,EAENO,EAAWC,EAAQ,IAAM,CAACR,CAAO,EAAG,CAACA,CAAO,CAAC,EAEnD,OAAAS,EAAkB,CAChB,MAAAR,EACA,SAAUM,EACV,SAAUF,CACZ,CAAC,EAEMH,CACT"}

package/dist/utilities/hooks/useWindowScrollPosition.d.ts

@@ -0,0 +1,10 @@
+type TUseWindowScrollPositionOptions = {
+    delay?: number;
+    delayMethod?: 'throttle' | 'debounce';
+};
+type TUseWindowScrollPositionOutput = {
+    x: number;
+    y: number;
+};
+export declare const useWindowScrollPosition: ({ delay, delayMethod }?: TUseWindowScrollPositionOptions) => TUseWindowScrollPositionOutput;
+export {};

package/dist/utilities/hooks/useWindowScrollPosition.js

@@ -0,0 +1,2 @@
+import{useState as s,useMemo as d,useEffect as i}from"react";import{debounce as c,throttle as w}from"throttle-debounce";const u=({delay:e=500,delayMethod:o="throttle"}={})=>{const[n,l]=s({x:0,y:0}),t=d(()=>o==="debounce"?c:w,[o]);return i(()=>{const r=t(e,()=>{l({x:window.scrollX,y:window.scrollY})});return window.addEventListener("scroll",r),()=>{window.removeEventListener("scroll",r)}},[t,e]),n};export{u as useWindowScrollPosition};
+//# sourceMappingURL=useWindowScrollPosition.js.map

package/dist/utilities/hooks/useWindowScrollPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowScrollPosition.js","sources":["../../../src/utilities/hooks/useWindowScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype TUseWindowScrollPositionOptions = {\n  delay?: number\n  delayMethod?: 'throttle' | 'debounce'\n}\n\ntype TUseWindowScrollPositionOutput = {\n  x: number\n  y: number\n}\n\nexport const useWindowScrollPosition = ({\n  delay = 500,\n  delayMethod = 'throttle'\n}: TUseWindowScrollPositionOptions = {}): TUseWindowScrollPositionOutput => {\n  const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 })\n\n  const delayMethodFn = useMemo(\n    () => (delayMethod === 'debounce' ? debounce : throttle),\n    [delayMethod]\n  )\n\n  useEffect(() => {\n    const handleScroll = delayMethodFn(delay, () => {\n      setScrollPosition({ x: window.scrollX, y: window.scrollY })\n    })\n\n    window.addEventListener('scroll', handleScroll)\n\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [delayMethodFn, delay])\n\n  return scrollPosition\n}\n"],"names":["useWindowScrollPosition","delay","delayMethod","scrollPosition","setScrollPosition","useState","delayMethodFn","useMemo","debounce","throttle","useEffect","handleScroll"],"mappings":"8HAaaA,EAA0B,CAAC,CACtC,MAAAC,EAAQ,IACR,YAAAC,EAAc,UAChB,EAAqC,KAAuC,CAC1E,KAAM,CAACC,EAAgBC,CAAiB,EAAIC,EAAS,CAAE,EAAG,EAAG,EAAG,CAAE,CAAC,EAE7DC,EAAgBC,EACpB,IAAOL,IAAgB,WAAaM,EAAWC,EAC/C,CAACP,CAAW,CACd,EAEA,OAAAQ,EAAU,IAAM,CACd,MAAMC,EAAeL,EAAcL,EAAO,IAAM,CAC9CG,EAAkB,CAAE,EAAG,OAAO,QAAS,EAAG,OAAO,OAAQ,CAAC,CAC5D,CAAC,EAED,cAAO,iBAAiB,SAAUO,CAAY,EAEvC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAY,CACnD,CACF,EAAG,CAACL,EAAeL,CAAK,CAAC,EAElBE,CACT"}

package/dist/utilities/index.d.ts

@@ -0,0 +1,5 @@
+export * from './create-theme-variants';
+export * from './css-wrapper';
+export { NoOverflowWrapper, noOverflowStyleBlock } from './no-overflow-wrapper';
+export * from './style';
+export * from './types';