@atom-learning/components 5.1.0 → 5.2.0-beta.2

package/dist/components/radio-card/RadioCard.d.ts

@@ -0,0 +1,373 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import * as React from 'react';
+export declare const StyledRadioCard: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
+    align?: "left" | "right" | undefined;
+    size?: "md" | "lg" | undefined;
+    isFullWidth?: boolean | "true" | "false" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textBold: string;
+        textRegular: string;
+        textSubtle: string;
+        textMinimal: string;
+        background: string;
+        backgroundAccent: string;
+        grey100: string;
+        grey200: string;
+        grey300: string;
+        grey400: string;
+        grey500: string;
+        grey600: string;
+        grey700: string;
+        grey800: string;
+        grey900: string;
+        grey1000: string;
+        grey1100: string;
+        grey1200: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        blue1000: string;
+        blue1100: string;
+        blue1200: string;
+        pink100: string;
+        pink200: string;
+        pink300: string;
+        pink400: string;
+        pink500: string;
+        pink600: string;
+        pink700: string;
+        pink800: string;
+        pink900: string;
+        pink1000: string;
+        pink1100: string;
+        pink1200: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        purple1000: string;
+        purple1100: string;
+        purple1200: string;
+        cyan100: string;
+        cyan200: string;
+        cyan300: string;
+        cyan400: string;
+        cyan500: string;
+        cyan600: string;
+        cyan700: string;
+        cyan800: string;
+        cyan900: string;
+        cyan1000: string;
+        cyan1100: string;
+        cyan1200: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        green1000: string;
+        green1100: string;
+        green1200: string;
+        magenta100: string;
+        magenta200: string;
+        magenta300: string;
+        magenta400: string;
+        magenta500: string;
+        magenta600: string;
+        magenta700: string;
+        magenta800: string;
+        magenta900: string;
+        magenta1000: string;
+        magenta1100: string;
+        magenta1200: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        red1000: string;
+        red1100: string;
+        red1200: string;
+        teal100: string;
+        teal200: string;
+        teal300: string;
+        teal400: string;
+        teal500: string;
+        teal600: string;
+        teal700: string;
+        teal800: string;
+        teal900: string;
+        teal1000: string;
+        teal1100: string;
+        teal1200: string;
+        orange100: string;
+        orange200: string;
+        orange300: string;
+        orange400: string;
+        orange500: string;
+        orange600: string;
+        orange700: string;
+        orange800: string;
+        orange900: string;
+        orange1000: string;
+        orange1100: string;
+        orange1200: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        yellow1000: string;
+        yellow1100: string;
+        yellow1200: string;
+        lime100: string;
+        lime200: string;
+        lime300: string;
+        lime400: string;
+        lime500: string;
+        lime600: string;
+        lime700: string;
+        lime800: string;
+        lime900: string;
+        lime1000: string;
+        lime1100: string;
+        lime1200: string;
+        lapis100: string;
+        lapis200: string;
+        lapis300: string;
+        lapis400: string;
+        lapis500: string;
+        lapis600: string;
+        lapis700: string;
+        lapis800: string;
+        lapis900: string;
+        lapis1000: string;
+        lapis1100: string;
+        lapis1200: string;
+        maroon100: string;
+        maroon200: string;
+        maroon300: string;
+        maroon400: string;
+        maroon500: string;
+        maroon600: string;
+        maroon700: string;
+        maroon800: string;
+        maroon900: string;
+        maroon1000: string;
+        maroon1100: string;
+        maroon1200: string;
+        marsh100: string;
+        marsh200: string;
+        marsh300: string;
+        marsh400: string;
+        marsh500: string;
+        marsh600: string;
+        marsh700: string;
+        marsh800: string;
+        marsh900: string;
+        marsh1000: string;
+        marsh1100: string;
+        marsh1200: string;
+        alpha100: string;
+        alpha150: string;
+        alpha200: string;
+        alpha250: string;
+        alpha600: string;
+        infoLight: string;
+        info: string;
+        infoMid: string;
+        infoDark: string;
+        successLight: string;
+        success: string;
+        successMid: string;
+        successDark: string;
+        dangerLight: string;
+        danger: string;
+        dangerMid: string;
+        dangerDark: string;
+        warningLight: string;
+        warning: string;
+        warningMid: string;
+        warningDark: string;
+        warningText: string;
+        subjectEnglish: string;
+        subjectMaths: string;
+        subjectScience: string;
+        subjectVerbalReasoning: string;
+        subjectNonVerbalReasoning: string;
+        subjectCreativeWriting: string;
+        subjectExamSkills: string;
+        glBlueLight: string;
+        glBluePrimary: string;
+        glBlueDark: string;
+        primary100: string;
+        primary200: string;
+        primary300: string;
+        primary400: string;
+        primary500: string;
+        primary600: string;
+        primary700: string;
+        primary800: string;
+        primary900: string;
+        primary1000: string;
+        primary1100: string;
+        primary1200: string;
+    };
+    space: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "24": string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
+        display: string;
+        body: string;
+    };
+    sizes: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+    };
+    radii: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        round: string;
+    };
+    shadows: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+    };
+    ratios: {
+        "16-9": string;
+        "3-2": string;
+        "4-3": string;
+        "1-1": string;
+        "3-4": string;
+    };
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
+        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
+    };
+    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
+        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+    };
+    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+}>>;
+type RadioCardProps = React.ComponentProps<typeof StyledRadioCard>;
+export declare const RadioCard: ({ children, isFullWidth, size, align, ...rest }: RadioCardProps) => React.JSX.Element;
+export {};

package/dist/components/radio-card/RadioCard.js

@@ -0,0 +1,2 @@
+import*as l from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";import{Box as d}from"../box/Box.js";const o=t(l.Item,{alignItems:"center",bg:"white",border:"1px solid $grey600",borderRadius:"$0",cursor:"pointer",display:"flex",textAlign:"left",'&[data-state="checked"]':{outline:"2px solid $primary800",outlineOffset:"-2px"},variants:{align:{left:{flexDirection:"row"},right:{flexDirection:"row-reverse"}},size:{md:{px:"$4",py:"$3"},lg:{px:"$5",py:"$4"}},isFullWidth:{true:{width:"100%"},false:{width:"max-content"}}}}),c=t("div",{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey900",borderRadius:"$round",display:"flex",flexShrink:0,justifyContent:"center",p:0,size:"$1",transition:"all 50ms ease-out",'[data-state="checked"] &':{backgroundColor:"$primary800",borderColor:"$primary800"},variants:{containerIsFullWidth:{true:{},false:{}},align:{left:{mr:"$4"},right:{}}},compoundVariants:[{containerIsFullWidth:!0,align:"right",css:{ml:"auto"}},{containerIsFullWidth:!1,align:"right",css:{ml:"$4"}}]}),p=t(l.Indicator,{backgroundColor:"white",borderRadius:"$round",position:"absolute",size:"6px"}),u=({children:a,isFullWidth:r=!1,size:n="md",align:i="left",...s})=>e.createElement(o,{...s,align:i,isFullWidth:r,size:n},e.createElement(c,{align:i,containerIsFullWidth:r},e.createElement(p,null)),e.createElement(d,null,a));export{u as RadioCard,o as StyledRadioCard};
+//# sourceMappingURL=RadioCard.js.map

package/dist/components/radio-card/RadioCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCard.js","sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $grey600',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary800',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $grey900',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,wBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,cACjB,YAAa,aACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,CAAS,CACjB"}

package/dist/components/radio-card/RadioCardGroup.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from '@atom-learning/stitches-react';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import * as React from 'react';
+import type { Override } from '../../utilities';
+import { Flex } from '../flex';
+import { StyledRadioCard } from './RadioCard';
+type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> & VariantProps<typeof StyledRadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
+export declare const RadioCardGroup: ({ css, children, size, isFullWidth, align, gap, justify, ...rest }: RadioCardGroupProps) => React.JSX.Element;
+export {};

package/dist/components/radio-card/RadioCardGroup.js

@@ -0,0 +1,2 @@
+import*as p from"@radix-ui/react-radio-group";import*as e from"react";import{Flex as d}from"../flex/Flex.js";import{RadioCard as c}from"./RadioCard.js";const f=({css:r,children:t,size:l,isFullWidth:a,align:o,gap:s="3",justify:m,...n})=>e.createElement(p.Root,{...n},e.createElement(d,{direction:"row",justify:m,gap:s,wrap:"wrap",css:r},e.Children.map(t,i=>e.isValidElement(i)&&(i==null?void 0:i.type)===c?e.cloneElement(i,{size:l,isFullWidth:a,align:o}):i)));export{f as RadioCardGroup};
+//# sourceMappingURL=RadioCardGroup.js.map

package/dist/components/radio-card/RadioCardGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { RadioCard, StyledRadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n  Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> &\n    VariantProps<typeof StyledRadioCard>,\n  React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup = ({\n  css,\n  children,\n  size,\n  isFullWidth,\n  align,\n  gap = '3',\n  justify,\n  ...rest\n}: RadioCardGroupProps) => (\n  <RadioGroup.Root {...rest}>\n    <Flex direction=\"row\" justify={justify} gap={gap} wrap=\"wrap\" css={css}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child?.type === RadioCard) {\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof RadioCard>>,\n            { size, isFullWidth, align }\n          )\n        }\n        return child\n      })}\n    </Flex>\n  </RadioGroup.Root>\n)\n"],"names":["RadioCardGroup","css","children","size","isFullWidth","align","gap","justify","rest","React","RadioGroup","Flex","child","RadioCard"],"mappings":"8JAeaA,EAAiB,CAAC,CAC7B,IAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,QAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CAAAA,EACnBC,EAAA,cAACE,EAAA,CAAK,UAAU,MAAM,QAASJ,EAAS,IAAKD,EAAK,KAAK,OAAO,IAAKL,GAChEQ,EAAM,SAAS,IAAIP,EAAWU,GACzBH,EAAM,eAAeG,CAAK,IAAKA,GAAA,YAAAA,EAAO,QAASC,EAC1CJ,EAAM,aACXG,EACA,CAAE,KAAAT,EAAM,YAAAC,EAAa,MAAAC,CAAM,CAC7B,EAEKO,CACR,CACH,CACF"}

package/dist/components/radio-card/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioCard } from './RadioCard';
+export { RadioCardGroup } from './RadioCardGroup';

package/dist/components/scrollable-container/ScrollableContainer.context.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface IScrollableContainerProviderProps {
+    scrollableEl: HTMLElement | null;
+    containerEl: HTMLElement | null;
+    children: React.ReactNode;
+}
+export interface IScrollableContainerContext {
+    hasProvider: boolean;
+    scrollableContainer?: HTMLDivElement | null;
+    hasScrollYAxis: boolean;
+    hasScrolledYAxis: boolean;
+    hasScrolledToEndYAxis: boolean;
+    hasScrollXAxis: boolean;
+    hasScrolledXAxis: boolean;
+    hasScrolledToEndXAxis: boolean;
+    scrollProgressYAxis: number;
+    scrollbarWidthYAxis: number;
+    scrollProgressXAxis: number;
+    scrollbarWidthXAxis: number;
+    scrollableEl?: HTMLElement | null;
+    containerEl?: HTMLElement | null;
+}
+export declare const ScrollableContainerContext: React.Context<IScrollableContainerContext>;
+export declare const ScrollableContainerProvider: ({ scrollableEl, containerEl, children }: IScrollableContainerProviderProps) => React.JSX.Element;

package/dist/components/scrollable-container/ScrollableContainer.context.js

@@ -0,0 +1,2 @@
+import*as s from"react";import{useResizeObserver as b}from"../../utilities/hooks/useResizeObserver.js";const S=s.createContext({hasProvider:!1,hasScrollYAxis:!1,hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrollXAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1,scrollProgressYAxis:0,scrollbarWidthYAxis:0,scrollProgressXAxis:0,scrollbarWidthXAxis:0}),H=({scrollableEl:l,containerEl:r,children:E})=>{const[i,X]=s.useState(!1),[t,Y]=s.useState(!1),[c,g]=s.useState(0),[e,T]=s.useState(0),[{hasScrolledYAxis:a,hasScrolledToEndYAxis:h,hasScrolledXAxis:d,hasScrolledToEndXAxis:n},W]=s.useState({hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1}),o=s.useCallback(()=>{!l||W({hasScrolledYAxis:!!l.scrollTop,hasScrolledToEndYAxis:Math.abs(l.scrollHeight-l.clientHeight-l.scrollTop)<1,hasScrolledXAxis:!!l.scrollLeft,hasScrolledToEndXAxis:Math.abs(l.scrollWidth-l.clientWidth-l.scrollLeft)<1})},[l]);b({delay:0,elements:[r,l],onResize:()=>{!l||!r||(X(l.scrollHeight>l.clientHeight),Y(l.scrollWidth>l.clientWidth),g(r.clientHeight-l.clientHeight),T(r.clientWidth-l.clientWidth),o())}});const x=(()=>!l||l.scrollHeight<=l.clientHeight?0:l.scrollTop/(l.scrollHeight-l.clientHeight))(),A=(()=>!l||l.scrollWidth<=l.clientWidth?0:l.scrollLeft/(l.scrollWidth-l.clientWidth))();s.useEffect(()=>{if(l)return o(),l.addEventListener("scroll",o),()=>{l.removeEventListener("scroll",o)}},[l,o]);const u=s.useMemo(()=>({hasProvider:!0,hasScrollYAxis:i,hasScrolledYAxis:a,hasScrolledToEndYAxis:h,scrollProgressYAxis:x,scrollbarWidthYAxis:c,hasScrollXAxis:t,hasScrolledXAxis:d,hasScrolledToEndXAxis:n,scrollProgressXAxis:A,scrollbarWidthXAxis:e,scrollableEl:l,containerEl:r}),[i,a,h,x,c,t,d,n,A,e,l,r]);return s.createElement(S.Provider,{value:u},E)};export{S as ScrollableContainerContext,H as ScrollableContainerProvider};
+//# sourceMappingURL=ScrollableContainer.context.js.map

package/dist/components/scrollable-container/ScrollableContainer.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableContainer.context.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\n\nexport interface IScrollableContainerProviderProps {\n  scrollableEl: HTMLElement | null\n  containerEl: HTMLElement | null\n  children: React.ReactNode\n}\n\nexport interface IScrollableContainerContext {\n  hasProvider: boolean\n  scrollableContainer?: HTMLDivElement | null\n  hasScrollYAxis: boolean\n  hasScrolledYAxis: boolean\n  hasScrolledToEndYAxis: boolean\n  hasScrollXAxis: boolean\n  hasScrolledXAxis: boolean\n  hasScrolledToEndXAxis: boolean\n  scrollProgressYAxis: number\n  scrollbarWidthYAxis: number\n  scrollProgressXAxis: number\n  scrollbarWidthXAxis: number\n  scrollableEl?: HTMLElement | null\n  containerEl?: HTMLElement | null\n}\n\nexport const ScrollableContainerContext = React.createContext<IScrollableContainerContext>({\n  hasProvider: false,\n  hasScrollYAxis: false,\n  hasScrolledYAxis: false,\n  hasScrolledToEndYAxis: false,\n  hasScrollXAxis: false,\n  hasScrolledXAxis: false,\n  hasScrolledToEndXAxis: false,\n  scrollProgressYAxis: 0,\n  scrollbarWidthYAxis: 0,\n  scrollProgressXAxis: 0,\n  scrollbarWidthXAxis: 0\n})\n\nexport const ScrollableContainerProvider = ({ scrollableEl, containerEl, children }: IScrollableContainerProviderProps) => {\n  const [hasScrollYAxis, setHasScrollYAxis] = React.useState<boolean>(false)\n  const [hasScrollXAxis, setHasScrollXAxis] = React.useState<boolean>(false)\n  const [scrollbarWidthYAxis, setScrollbarWidthYAxis] = React.useState<number>(0)\n  const [scrollbarWidthXAxis, setScrollbarWidthXAxis] = React.useState<number>(0)\n  const [{ hasScrolledYAxis, hasScrolledToEndYAxis, hasScrolledXAxis, hasScrolledToEndXAxis }, setScrollState] = React.useState<{\n    hasScrolledYAxis: boolean\n    hasScrolledToEndYAxis: boolean\n    hasScrolledXAxis: boolean\n    hasScrolledToEndXAxis: boolean\n  }>({ hasScrolledYAxis: false, hasScrolledToEndYAxis: false, hasScrolledXAxis: false, hasScrolledToEndXAxis: false })\n\n  const updateScrollState = React.useCallback(() => {\n    if (!scrollableEl) return\n    setScrollState({\n      hasScrolledYAxis: !!scrollableEl.scrollTop,\n      hasScrolledToEndYAxis:\n        Math.abs(scrollableEl.scrollHeight - scrollableEl.clientHeight - scrollableEl.scrollTop) <\n        1,\n      hasScrolledXAxis: !!scrollableEl.scrollLeft,\n      hasScrolledToEndXAxis:\n        Math.abs(scrollableEl.scrollWidth - scrollableEl.clientWidth - scrollableEl.scrollLeft) <\n        1\n    })\n  }, [scrollableEl])\n\n  useResizeObserver({\n    delay: 0,\n    elements: [containerEl, scrollableEl],\n    onResize: () => {\n      if (!scrollableEl) return\n      if (!containerEl) return\n      setHasScrollYAxis(scrollableEl.scrollHeight > scrollableEl.clientHeight)\n      setHasScrollXAxis(scrollableEl.scrollWidth > scrollableEl.clientWidth)\n      setScrollbarWidthYAxis(containerEl.clientHeight - scrollableEl.clientHeight)\n      setScrollbarWidthXAxis(containerEl.clientWidth - scrollableEl.clientWidth)\n      updateScrollState()\n    }\n  })\n\n\n  /** A number between 0-1 for the relative amount of pixels scrolled */\n  const scrollProgressYAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollHeight <= scrollableEl.clientHeight) return 0\n    return scrollableEl.scrollTop / (scrollableEl.scrollHeight - scrollableEl.clientHeight)\n  })()\n\n  const scrollProgressXAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollWidth <= scrollableEl.clientWidth) return 0\n    return scrollableEl.scrollLeft / (scrollableEl.scrollWidth - scrollableEl.clientWidth)\n  })()\n\n  React.useEffect(() => {\n    if (!scrollableEl) return\n    updateScrollState()\n\n    scrollableEl.addEventListener('scroll', updateScrollState)\n\n    return () => {\n      scrollableEl.removeEventListener('scroll', updateScrollState)\n    }\n  }, [scrollableEl, updateScrollState])\n\n  const value = React.useMemo<IScrollableContainerContext>(\n    () => ({\n      hasProvider: true,\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      containerEl\n    }),\n    [\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      containerEl,\n    ]\n  )\n\n  return <ScrollableContainerContext.Provider value={value}>{children}</ScrollableContainerContext.Provider>\n}\n"],"names":["ScrollableContainerContext","React","ScrollableContainerProvider","scrollableEl","containerEl","children","hasScrollYAxis","setHasScrollYAxis","hasScrollXAxis","setHasScrollXAxis","scrollbarWidthYAxis","setScrollbarWidthYAxis","scrollbarWidthXAxis","setScrollbarWidthXAxis","hasScrolledYAxis","hasScrolledToEndYAxis","hasScrolledXAxis","hasScrolledToEndXAxis","setScrollState","updateScrollState","useResizeObserver","scrollProgressYAxis","scrollProgressXAxis","value"],"mappings":"uGA2Ba,MAAAA,EAA6BC,EAAM,cAA2C,CACzF,YAAa,GACb,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,CACvB,CAAC,EAEYC,EAA8B,CAAC,CAAE,aAAAC,EAAc,YAAAC,EAAa,SAAAC,CAAS,IAAyC,CACzH,KAAM,CAACC,EAAgBC,CAAiB,EAAIN,EAAM,SAAkB,EAAK,EACnE,CAACO,EAAgBC,CAAiB,EAAIR,EAAM,SAAkB,EAAK,EACnE,CAACS,EAAqBC,CAAsB,EAAIV,EAAM,SAAiB,CAAC,EACxE,CAACW,EAAqBC,CAAsB,EAAIZ,EAAM,SAAiB,CAAC,EACxE,CAAC,CAAE,iBAAAa,EAAkB,sBAAAC,EAAuB,iBAAAC,EAAkB,sBAAAC,CAAsB,EAAGC,CAAc,EAAIjB,EAAM,SAKlH,CAAE,iBAAkB,GAAO,sBAAuB,GAAO,iBAAkB,GAAO,sBAAuB,EAAM,CAAC,EAE7GkB,EAAoBlB,EAAM,YAAY,IAAM,CAC5C,CAACE,GACLe,EAAe,CACb,iBAAkB,CAAC,CAACf,EAAa,UACjC,sBACE,KAAK,IAAIA,EAAa,aAAeA,EAAa,aAAeA,EAAa,SAAS,EACvF,EACF,iBAAkB,CAAC,CAACA,EAAa,WACjC,sBACE,KAAK,IAAIA,EAAa,YAAcA,EAAa,YAAcA,EAAa,UAAU,EACtF,CACJ,CAAC,CACH,EAAG,CAACA,CAAY,CAAC,EAEjBiB,EAAkB,CAChB,MAAO,EACP,SAAU,CAAChB,EAAaD,CAAY,EACpC,SAAU,IAAM,CACV,CAACA,GACD,CAACC,IACLG,EAAkBJ,EAAa,aAAeA,EAAa,YAAY,EACvEM,EAAkBN,EAAa,YAAcA,EAAa,WAAW,EACrEQ,EAAuBP,EAAY,aAAeD,EAAa,YAAY,EAC3EU,EAAuBT,EAAY,YAAcD,EAAa,WAAW,EACzEgB,EAAkB,EACpB,CACF,CAAC,EAID,MAAME,GAAuB,IACvB,CAAClB,GACDA,EAAa,cAAgBA,EAAa,aAAqB,EAC5DA,EAAa,WAAaA,EAAa,aAAeA,EAAa,iBAGtEmB,GAAuB,IACvB,CAACnB,GACDA,EAAa,aAAeA,EAAa,YAAoB,EAC1DA,EAAa,YAAcA,EAAa,YAAcA,EAAa,gBAG5EF,EAAM,UAAU,IAAM,CACpB,GAAKE,EACL,OAAAgB,EAAAA,EAEAhB,EAAa,iBAAiB,SAAUgB,CAAiB,EAElD,IAAM,CACXhB,EAAa,oBAAoB,SAAUgB,CAAiB,CAC9D,CACF,EAAG,CAAChB,EAAcgB,CAAiB,CAAC,EAEpC,MAAMI,EAAQtB,EAAM,QAClB,KAAO,CACL,YAAa,GACb,eAAAK,EACA,iBAAAQ,EACA,sBAAAC,EACA,oBAAAM,EACA,oBAAAX,EACA,eAAAF,EACA,iBAAAQ,EACA,sBAAAC,EACA,oBAAAK,EACA,oBAAAV,EACA,aAAAT,EACA,YAAAC,CACF,GACA,CACEE,EACAQ,EACAC,EACAM,EACAX,EACAF,EACAQ,EACAC,EACAK,EACAV,EACAT,EACAC,CACF,CACF,EAEA,OAAOH,EAAA,cAACD,EAA2B,SAA3B,CAAoC,MAAOuB,CAAAA,EAAQlB,CAAS,CACtE"}