@atom-learning/components 5.3.0 → 5.4.0

package/dist/components/side-bar/SideBarComponents.js

@@ -0,0 +1,2 @@
+import{styled as o}from"../../stitches.js";import{Image as e}from"../image/Image.js";import{Text as r}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"flex-end",color:"$text",display:"flex",gap:"$4",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),n=e,p=o(r,{color:"$text",whiteSpace:"nowrap"});export{t as SideBarBody,a as SideBarBrand,n as SideBarBrandLogo,p as SideBarBrandName,i as SideBarFooter,d as SideBarHeader};
+//# sourceMappingURL=SideBarComponents.js.map

package/dist/components/side-bar/SideBarComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n  borderBottom: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n  flexGrow: 1,\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n  borderTop: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n  alignItems: 'flex-end',\n  color: '$text',\n  display: 'flex',\n  gap: '$4',\n  textDecoration: 'none',\n  '&:hover, &:focus': {\n    textDecoration: 'none'\n  }\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  color: '$text',\n  whiteSpace: 'nowrap'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"4HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,WAAY,WACZ,MAAO,QACP,QAAS,OACT,IAAK,KACL,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,MAAO,QACP,WAAY,QACd,CAAC"}

package/dist/components/side-bar/SideBarContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const SideBarContext: React.Context<{
+    isExpanded?: boolean;
+}>;
+export declare const useSidebarState: () => {
+    isExpanded?: boolean;
+};

package/dist/components/side-bar/SideBarContext.js

@@ -0,0 +1,2 @@
+import*as e from"react";const t=e.createContext({isExpanded:void 0}),o=()=>e.useContext(t);export{t as SideBarContext,o as useSidebarState};
+//# sourceMappingURL=SideBarContext.js.map

package/dist/components/side-bar/SideBarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarContext.js","sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"names":["SideBarContext","React","useSidebarState"],"mappings":"wBAEa,MAAAA,EAAiBC,EAAM,cAEjC,CACD,WAAY,MACd,CAAC,EAEYC,EAAkB,IAAMD,EAAM,WAAWD,CAAc"}

package/dist/components/side-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { SideBar } from './SideBar';
+export { useSidebarState } from './SideBarContext';

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,376 @@
+import * as React from 'react';
+import { SliderSteps } from './SliderSteps';
+import { SliderValue } from './SliderValue';
+declare const StyledSlider: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>>, {
+    theme?: "light" | "tonal" | 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">;
+    };
+}>>;
+export type SliderProps = React.ComponentProps<typeof StyledSlider>;
+type SliderType = React.ForwardRefExoticComponent<SliderProps> & {
+    Value: typeof SliderValue;
+    Steps: typeof SliderSteps;
+};
+export declare const Slider: SliderType;
+export {};

package/dist/components/slider/Slider.js

@@ -0,0 +1,2 @@
+import{Track as $,Root as b,Range as g,Thumb as y}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as v}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as o}from"../../utilities/style/disabledStyle.js";import{SliderSteps as S}from"./SliderSteps.js";import{SliderValue as x}from"./SliderValue.js";const a=t($,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),R=t(b,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[disabled]":o,variants:{theme:{light:{[`${a}`]:{bg:"#fff"}},tonal:{[`${a}`]:{bg:"$grey600"}}}}}),E=t(g,{bg:"$primary800",borderRadius:"$round",height:"100%",position:"absolute","&[disabled]":o}),k=t(y,{bg:"$primary900",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primary1000"},"&:focus":{outline:"2px solid $primary900",outlineOffset:"2px"},"&[disabled]":o}),r=e.forwardRef(({value:l,defaultValue:n,min:m=0,max:d=100,theme:s="tonal",css:p,children:u,...c},f)=>{const i=l||n;return e.createElement(v,{css:p},e.createElement(R,{theme:s,defaultValue:n,value:l,min:m,max:d,ref:f,...c},e.createElement(a,null,e.createElement(E,null)),(i==null?void 0:i.length)&&i.map((w,h)=>e.createElement(k,{key:`thumb${h}`}))),u)});r.Value=x,r.Steps=S,r.displayName="Slider";export{r as Slider};
+//# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper, disabledStyle } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  borderRadius: '$round',\n  flexGrow: 1,\n  position: 'relative',\n  '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n  '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n  alignItems: 'center',\n  display: 'flex',\n  position: 'relative',\n  touchAction: 'none',\n  userSelect: 'none',\n  cursor: 'pointer',\n  '&[data-orientation=\"horizontal\"]': {\n    height: '$1'\n  },\n  '&[data-orientation=\"vertical\"]': {\n    flexDirection: 'column',\n    width: '$1'\n  },\n  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$grey600' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary800',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[disabled]': disabledStyle\n})\n\nconst StyledThumb = styled(Thumb, {\n  bg: '$primary900',\n  borderRadius: '$round',\n  display: 'block',\n  size: '$1',\n  '&:hover': {\n    bg: '$primary1000'\n  },\n  '&:focus': {\n    outline: '2px solid $primary900',\n    outlineOffset: '2px'\n  },\n  '&[disabled]': disabledStyle\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      css,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper css={css}>\n        <StyledSlider\n          theme={theme}\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","disabledStyle","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"ogBASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,CACxD,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,WAAY,SACZ,QAAS,OACT,SAAU,WACV,YAAa,OACb,WAAY,OACZ,OAAQ,UACR,mCAAoC,CAClC,OAAQ,IACV,EACA,iCAAkC,CAChC,cAAe,SACf,MAAO,IACT,EACA,cAAeC,EACf,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGL,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,UAAW,CACvC,CACF,CACF,CACF,CAAC,EAEKM,EAAcL,EAAOM,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,cAAeF,CACjB,CAAC,EAEKG,EAAcP,EAAOQ,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAeJ,CACjB,CAAC,EASYK,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CAAAA,EACfN,EAAA,cAACR,EAAA,CACC,MAAOa,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACX,EAAA,KACCW,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAAA,CAAK,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}

package/dist/components/slider/SliderSteps.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type SliderStepsType = {
+    steps?: {
+        label: string;
+        value: number;
+    }[];
+};
+type SliderStepsProps = {
+    min: number;
+    max: number;
+} & SliderStepsType;
+export declare const SliderSteps: ({ min, max, steps }: SliderStepsProps) => React.JSX.Element | null;
+export {};

package/dist/components/slider/SliderSteps.js

@@ -0,0 +1,2 @@
+import*as s from"react";import{styled as r}from"../../stitches.js";import{Text as i}from"../text/Text.js";const n=r("div",{height:"$space$3",mt:"$3",position:"relative",width:"100%"}),a=(l,e,o)=>(l-e)/(o-e)*100,m=(l,e,o)=>{const t=a(l,e,o);return t<=10?0:t>=90?100:50},p=({min:l,max:e,steps:o=[]})=>o.length===0?null:s.createElement(n,null,o.map(t=>s.createElement(i,{as:"span",key:t.value,css:{position:"absolute",color:"$grey700"},style:{left:`${a(t.value,l,e)}%`,transform:`translateX(-${m(t.value,l,e)}%)`}},t.label)));export{p as SliderSteps};
+//# sourceMappingURL=SliderSteps.js.map

package/dist/components/slider/SliderSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderSteps.js","sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Text } from '../text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst SliderStepsContainer = styled('div', {\n  height: '$space$3',\n  mt: '$3',\n  position: 'relative',\n  width: '100%'\n})\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <SliderStepsContainer>\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          css={{\n            position: 'absolute',\n            color: '$grey700'\n          }}\n          style={{\n            left: `${getPercentValue(step.value, min, max)}%`,\n            transform: `translateX(-${getTransformValue(\n              step.value,\n              min,\n              max\n            )}%)`\n          }}\n        >\n          {step.label}\n        </Text>\n      ))}\n    </SliderStepsContainer>\n  )\n}\n"],"names":["SliderStepsContainer","styled","getPercentValue","value","min","max","getTransformValue","percentage","SliderSteps","steps","React","step","Text"],"mappings":"0GAeA,MAAMA,EAAuBC,EAAO,MAAO,CACzC,OAAQ,WACR,GAAI,KACJ,SAAU,WACV,MAAO,MACT,CAAC,EAEKC,EAAkB,CAACC,EAAeC,EAAaC,KAC1CF,EAAQC,IAAQC,EAAMD,GAAQ,IAGnCE,EAAoB,CAACH,EAAeC,EAAaC,IAAwB,CAC7E,MAAME,EAAaL,EAAgBC,EAAOC,EAAKC,CAAG,EAElD,OAAIE,GAAc,GAAW,EACzBA,GAAc,GAAW,IACtB,EACT,EAEaC,EAAc,CAAC,CAAE,IAAAJ,EAAK,IAAAC,EAAK,MAAAI,EAAQ,CAAG,CAAA,IAC7CA,EAAM,SAAW,EAAU,KAG7BC,EAAA,cAACV,EAAA,KACES,EAAM,IAAKE,GACVD,EAAA,cAACE,EAAA,CACC,GAAG,OACH,IAAKD,EAAK,MACV,IAAK,CACH,SAAU,WACV,MAAO,UACT,EACA,MAAO,CACL,KAAM,GAAGT,EAAgBS,EAAK,MAAOP,EAAKC,CAAG,KAC7C,UAAW,eAAeC,EACxBK,EAAK,MACLP,EACAC,CACF,KACF,CAECM,EAAAA,EAAK,KACR,CACD,CACH"}

package/dist/components/slider/SliderValue.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type SliderValueType = {
+    outputLabel?: (value: number | number[]) => string;
+};
+type SliderValueProps = SliderValueType & {
+    value?: number[];
+};
+export declare const SliderValue: ({ value, outputLabel }: SliderValueProps) => React.JSX.Element;
+export {};

package/dist/components/slider/SliderValue.js

@@ -0,0 +1,2 @@
+import*as o from"react";import{Text as l}from"../text/Text.js";const a=({value:e=[],outputLabel:t=r=>`Current value is ${r}`})=>o.createElement(l,{css:{mt:"$4",color:"$grey700",width:"100%"}},t(e.length===1?e[0]:e));export{a as SliderValue};
+//# sourceMappingURL=SliderValue.js.map

package/dist/components/slider/SliderValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderValue.js","sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text css={{ mt: '$4', color: '$grey700', width: '100%' }}>\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"names":["SliderValue","value","outputLabel","React","Text"],"mappings":"qEAYaA,EAAc,CAAC,CAC1B,MAAAC,EAAQ,CAAC,EACT,YAAAC,EAAeD,GAAU,oBAAoBA,GAC/C,IAEIE,EAAA,cAACC,EAAA,CAAK,IAAK,CAAE,GAAI,KAAM,MAAO,WAAY,MAAO,MAAO,CAAA,EACrDF,EAAYD,EAAM,SAAW,EAAIA,EAAM,GAAKA,CAAK,CACpD"}

package/dist/components/slider/index.d.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/dist/components/slider-field/SliderField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { SliderProps } from '../../components/slider';
+import { SliderStepsType } from '../../components/slider/SliderSteps';
+import { SliderValueType } from '../slider/SliderValue';
+type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & FieldElementWrapperProps;
+export declare const SliderField: {
+    ({ css, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/slider-field/SliderField.js

@@ -0,0 +1,2 @@
+import e from"react";import{useFormContext as S,useController as V}from"react-hook-form";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import{Slider as t}from"../slider/Slider.js";const i=({css:u,hideLabel:d,label:s,name:a,defaultValue:f,value:l,validation:p,outputLabel:c,min:r=0,max:n=100,steps:b=[],...h})=>{const{control:v}=S(),{field:{ref:x,onChange:m,value:o,name:E}}=V({name:a,control:v,rules:p,defaultValue:f});return e.useEffect(()=>{l!=null&&l.length&&m(l)},[JSON.stringify(l)]),e.createElement(g,{css:u,fieldId:a,label:s,hideLabel:d},e.createElement(t,{ref:x,name:E,onValueChange:m,value:o,min:r,max:n,...h},e.createElement(t.Steps,{min:r,max:n,steps:b}),e.createElement(t.Value,{value:o,outputLabel:c})))};i.displayName="SliderField";export{i as SliderField};
+//# sourceMappingURL=SliderField.js.map

package/dist/components/slider-field/SliderField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.js","sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { Slider, SliderProps } from '~/components/slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper css={css} fieldId={name} label={label} hideLabel={hideLabel}>\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...remainingProps}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"names":["SliderField","css","hideLabel","label","name","defaultValue","value","validation","outputLabel","min","max","steps","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","React","FieldWrapper","Slider"],"mappings":"qPAiBa,MAAAA,EAAc,CAAC,CAC1B,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,CAAA,KACLC,CACL,IAAwB,CACtB,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACd,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAS,EACA,MAAON,EACP,aAAAF,CACF,CAAC,EAED,OAAAe,EAAM,UAAU,IAAM,CAEhBd,GAAA,MAAAA,EAAO,QAAQU,EAASV,CAAK,CACnC,EAAG,CAAC,KAAK,UAAUA,CAAK,CAAC,CAAC,EAGxBc,EAAA,cAACC,EAAA,CAAa,IAAKpB,EAAK,QAASG,EAAM,MAAOD,EAAO,UAAWD,CAAAA,EAC9DkB,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACN,cAAeF,EACf,MAAOC,EACP,IAAKR,EACL,IAAKC,EACJ,GAAGE,GAEJQ,EAAA,cAACE,EAAO,MAAP,CAAa,IAAKb,EAAK,IAAKC,EAAK,MAAOC,CAAO,CAAA,EAEhDS,EAAA,cAACE,EAAO,MAAP,CAAa,MAAOL,EAAY,YAAaT,CAAa,CAAA,CAC7D,CACF,CAEJ,EAEAR,EAAY,YAAc"}

package/dist/components/slider-field/index.d.ts

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