@atom-learning/components 1.4.0 → 1.5.0

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

@@ -0,0 +1,276 @@
+import * as React from 'react';
+import { SliderSteps } from './SliderSteps';
+import { SliderValue } from './SliderValue';
+declare const StyledSlider: import("@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("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;
+export declare type SliderProps = React.ComponentProps<typeof StyledSlider>;
+export declare const Slider: React.FC<SliderProps> & {
+    Value: typeof SliderValue;
+    Steps: typeof SliderSteps;
+};
+export {};

package/dist/components/slider/Slider.js

@@ -0,0 +1 @@
+const e=["value","defaultValue","min","max","theme","css","children"];import{Track as t,Root as i,Range as r,Thumb as a}from"@radix-ui/react-slider";import{createElement as o}from"react";import{styled as l}from"../../stitches.js";import{CSSWrapper as n}from"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import"../../utilities/style/keyframe-animations.js";import{SliderSteps as s}from"./SliderSteps.js";import{SliderValue as d}from"./SliderValue.js";const u=l(t,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),m=l(i,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[data-disabled]":{cursor:"not-allowed",bg:"$tonal100"},variants:{theme:{light:{[`${u}`]:{bg:"#fff"}},tonal:{[`${u}`]:{bg:"$tonal200"}}}}}),p=l(r,{bg:"$primary",borderRadius:"$round",height:"100%",position:"absolute","&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),c=l(a,{bg:"$primaryMid",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primaryDark"},"&:focus":{outline:"2px solid $primaryMid",outlineOffset:"2px"},"&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),h=t=>{let{value:i,defaultValue:r,min:a=0,max:l=100,theme:s="tonal",css:d,children:h}=t,f=function(e,t){if(null==e)return{};var i,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)i=o[r],t.indexOf(i)>=0||(a[i]=e[i]);return a}(t,e);const $=i||r;return o(n,{css:d},o(m,Object.assign({theme:s,defaultValue:r,value:i,min:a,max:l},f),o(u,null,o(p,null)),(null==$?void 0:$.length)&&$.map(((e,t)=>o(c,{key:`thumb${t}`})))),h)};h.Value=d,h.Steps=s,h.displayName="Slider";export{h as Slider};

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

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

package/dist/components/slider/SliderSteps.js

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

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

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

package/dist/components/slider/SliderValue.js

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

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SliderProps } from '../../components/slider';
+import { SliderStepsType } from '../../components/slider/SliderSteps';
+import { SliderValueType } from '../slider/SliderValue';
+import type { CSS } from '../../stitches';
+declare type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & {
+    css?: CSS;
+    label: string;
+    name: string;
+    defaultValue: number[];
+};
+export declare const SliderField: React.FC<SliderFieldProps>;
+export {};

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

@@ -0,0 +1 @@
+const e=["css","label","name","defaultValue","outputLabel","min","max","steps"];import t from"react";import{useFormContext as l,Controller as a}from"react-hook-form";import{FieldWrapper as r}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import{Slider as n}from"../slider/Slider.js";const o=o=>{let{css:m,label:s,name:u,defaultValue:i,outputLabel:p,min:c=0,max:d=100,steps:f=[]}=o,b=function(e,t){if(null==e)return{};var l,a,r={},n=Object.keys(e);for(a=0;a<n.length;a++)l=n[a],t.indexOf(l)>=0||(r[l]=e[l]);return r}(o,e);const{control:V}=l();return t.createElement(r,{css:m,fieldId:u,label:s},t.createElement(a,{control:V,name:u,defaultValue:i,render:({onChange:e,value:l})=>t.createElement(n,Object.assign({name:u,defaultValue:i,onValueChange:e,value:l},b),t.createElement(n.Steps,{min:c,max:d,steps:f}),t.createElement(n.Value,{value:l||i,outputLabel:p}))}))};o.displayName="SliderField";export{o as SliderField};

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

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

package/dist/components/text/Text.js

@@ -1 +1 @@
-const t=["size"];function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(t[r]=i[r])}return t}).apply(this,arguments)}import{forwardRef as i,createElement as r}from"react";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as s}from"../../utilities/style/capsize.js";import"polished";import"../../utilities/style/keyframe-animations.js";const o=({applyCapsize:t=!0}={})=>({xs:e({fontSize:"$xs",lineHeight:1.6},t?s(.4364):{}),sm:e({fontSize:"$sm",lineHeight:1.53},t?s(.4056):{}),md:e({fontSize:"$md",lineHeight:1.5},t?s(.3864):{}),lg:e({fontSize:"$lg",lineHeight:1.52},t?s(.3983):{}),xl:e({fontSize:"$xl",lineHeight:1.42},t?s(.3506):{})}),l=n("p",{color:"$tonal600",fontFamily:"$body",fontWeight:400,margin:0,variants:{size:o()}}),a=i(((e,i)=>{let{size:n="md"}=e,s=function(t,e){if(null==t)return{};var i,r,n={},s=Object.keys(t);for(r=0;r<s.length;r++)i=s[r],e.indexOf(i)>=0||(n[i]=t[i]);return n}(e,t);return r(l,Object.assign({size:n},s,{ref:i}))}));a.displayName="Text";export{l as StyledParagraph,a as Text,o as textVariantSize};
+const e=["size"];function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e}).apply(this,arguments)}import{forwardRef as i,createElement as r}from"react";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as s}from"../../utilities/style/capsize.js";import"polished";import"../../utilities/style/keyframe-animations.js";const o=({applyCapsize:e=!0}={})=>({xs:t({fontSize:"$xs",lineHeight:1.6},e?s(.4364):{}),sm:t({fontSize:"$sm",lineHeight:1.53},e?s(.4056):{}),md:t({fontSize:"$md",lineHeight:1.5},e?s(.3864):{}),lg:t({fontSize:"$lg",lineHeight:1.52},e?s(.3983):{}),xl:t({fontSize:"$xl",lineHeight:1.42},e?s(.3506):{})}),l=n("p",{color:"$tonal600",fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:{size:o()}}),a=i(((t,i)=>{let{size:n="md"}=t,s=function(e,t){if(null==e)return{};var i,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)i=s[r],t.indexOf(i)>=0||(n[i]=e[i]);return n}(t,e);return r(l,Object.assign({size:n},s,{ref:i}))}));a.displayName="Text";export{l as StyledParagraph,a as Text,o as textVariantSize};