@atom-learning/components 1.4.0 → 1.5.0

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,19 @@
+import type { Props as DayzedInterface } from 'dayzed';
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+export declare type CalendarTranslationProps = {
+    monthNames?: string[];
+    weekdayNames?: string[];
+    labels?: {
+        open: string;
+        next: string;
+        previous: string;
+    };
+};
+declare type CalendarProps = DayzedInterface & CalendarTranslationProps & {
+    css?: CSS;
+    refDateToday?: React.RefObject<HTMLButtonElement>;
+    refDateSelected?: React.RefObject<HTMLButtonElement>;
+};
+export declare const Calendar: React.FC<CalendarProps>;
+export {};

package/dist/components/calendar/Calendar.js

@@ -0,0 +1 @@
+const e=["css","refDateSelected","refDateToday","firstDayOfWeek","monthNames","weekdayNames","labels"];function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r])}return e}).apply(this,arguments)}import{ChevronLeft as s,ChevronRight as r}from"@atom-learning/icons";import{useDayzed as o}from"dayzed";import{createElement as n}from"react";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import{Box as i}from"../box/Box.js";import{Flex as m}from"../flex/Flex.js";import{Heading as c}from"../heading/Heading.js";import{Icon as l}from"../icon/Icon.js";import{Text as p}from"../text/Text.js";import{styled as f}from"../../stitches.js";import{monthNamesShort as d,weekdayNamesShort as g}from"./constants.js";import{Day as u}from"./Day.js";const h=f("div",{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gridGap:"$1 $2"}),y=f=>{let{css:y,refDateSelected:j,refDateToday:$,firstDayOfWeek:b=0,monthNames:x=d,weekdayNames:O=g,labels:k={next:"Next month",previous:"Previous month"}}=f,v=function(e,t){if(null==e)return{};var s,r,o={},n=Object.keys(e);for(r=0;r<n.length;r++)s=n[r],t.indexOf(s)>=0||(o[s]=e[s]);return o}(f,e);const{calendars:D,getBackProps:w,getForwardProps:N,getDateProps:z}=o(t({firstDayOfWeek:b,showOutsideDays:!0},v));return D.length?n(i,{css:t({position:"relative",width:"min-content",mt:"-$1"},y)},n(m,{css:{position:"absolute",top:0,right:"-$1"}},n(a,Object.assign({label:k.previous,theme:"neutral",size:"lg"},w({calendars:D})),n(l,{is:s})),n(a,Object.assign({label:k.next,theme:"neutral",size:"lg"},N({calendars:D})),n(l,{is:r}))),D.map((({month:e,year:t,weeks:s})=>n(i,{key:`${e}${t}`},n(m,{css:{height:"$4",alignItems:"center",mb:"$4"}},n(c,{size:"xs"},x[e]," ",t)),n(h,{css:{mb:"$3"}},((e,t)=>{const s=e.slice(0,t);return e.slice(t).concat(s)})(O,b).map((s=>n(p,{as:"span",size:"sm",key:`${e}${t}${s}`,css:{fontWeight:600,textAlign:"center"}},s)))),n(h,null,s.map(((s,r)=>s.map(((s,o)=>{const a=`${e}${t}${r}${o}`;if(!s)return n("div",{key:a});const{date:i,selected:m,today:c,prevMonth:l,nextMonth:p}=s;return n(u,Object.assign({isOutsideMonth:l||p,isSelected:m,isToday:c,key:a,ref:m?j:c?$:null},z({dateObj:s})),i.getDate())}))))))))):null};y.displayName="Calendar";export{y as Calendar};

package/dist/components/calendar/Day.d.ts

@@ -0,0 +1,269 @@
+export declare const Day: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    isSelected?: boolean | "true" | undefined;
+    isToday?: boolean | "true" | undefined;
+    isOutsideMonth?: boolean | "true" | 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";
+        };
+    };
+}>>;

package/dist/components/calendar/Day.js

@@ -0,0 +1 @@
+import{styled as o}from"../../stitches.js";const r=o("button",{bg:"transparent",border:"none",borderRadius:"$round",color:"$tonal900",cursor:"pointer",fontFamily:"$body",fontSize:"$sm",size:"$3",p:0,transition:"all 75ms","&:hover":{bg:"$tonal100"},"&:active":{color:"white",bg:"$primary"},"&:focus":{outline:"2px solid $primary",outlineOffset:"2px"},variants:{isSelected:{true:{bg:"$primary",color:"white","&:hover":{bg:"$primary"}}},isToday:{true:{bg:"$tonal100"}},isOutsideMonth:{true:{color:"$tonal200"}}}});export{r as Day};

package/dist/components/calendar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const monthNamesShort: string[];
+export declare const weekdayNamesShort: string[];

package/dist/components/calendar/constants.js

@@ -0,0 +1 @@
+const e=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],u=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];export{e as monthNamesShort,u as weekdayNamesShort};

package/dist/components/date-field/DateField.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateInputProps } from '../../components/date-input';
+import { ValidationOptions } from '../../components/form';
+import type { CSS } from '../../stitches';
+declare type DateFieldProps = DateInputProps & {
+    css?: CSS;
+    description?: string;
+    label: string;
+    name: string;
+    prompt?: {
+        link: string;
+        label: string;
+    };
+    validation?: ValidationOptions;
+};
+export declare const DateField: React.FC<DateFieldProps>;
+export {};

package/dist/components/date-field/DateField.js

@@ -0,0 +1 @@
+const r=["css","label","name","validation","prompt","description"];import{createElement as e}from"react";import{useFormContext as o}from"react-hook-form";import{DateInput as t}from"../date-input/DateInput.js";import{FieldWrapper as i}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as p}from"../form/useFieldError.js";const a=a=>{let{css:n,label:l,name:s,validation:m,prompt:d,description:f}=a,c=function(r,e){if(null==r)return{};var o,t,i={},p=Object.keys(r);for(t=0;t<p.length;t++)o=p[t],e.indexOf(o)>=0||(i[o]=r[o]);return i}(a,r);const{register:u,trigger:j}=o(),{error:b}=p(s),g=m?u(m):u;return e(i,{css:n,description:f,error:b,fieldId:s,label:l,prompt:d,required:Boolean(null==m?void 0:m.required)},e(t,Object.assign({id:s,name:s,ref:g},b&&{state:"error"},c,{revalidate:j})))};a.displayName="DateField";export{a as DateField};

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

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

package/dist/components/date-input/DateInput.d.ts

@@ -0,0 +1,17 @@
+import type { Props as DayzedInterface } from 'dayzed';
+import * as React from 'react';
+import { CalendarTranslationProps } from '../calendar/Calendar';
+export declare type DateInputProps = DayzedInterface & CalendarTranslationProps & {
+    initialDate?: Date;
+    dateFormat?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    revalidate?: () => Promise<boolean>;
+};
+export declare const DateInput: React.ForwardRefExoticComponent<DayzedInterface & CalendarTranslationProps & {
+    initialDate?: Date | undefined;
+    dateFormat?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "sm" | "md" | undefined;
+    revalidate?: (() => Promise<boolean>) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/date-input/DateInput.js

@@ -0,0 +1 @@
+const e=["initialDate","dateFormat","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate"];import{CalendarEvent as t}from"@atom-learning/icons";import{forwardRef as a,useState as o,useRef as n,createElement as s}from"react";import{ActionIcon as r}from"../action-icon/ActionIcon.js";import{Box as i}from"../box/Box.js";import{Calendar as l}from"../calendar/Calendar.js";import{Icon as m}from"../icon/Icon.js";import{Input as d}from"../input/Input.js";import{Popover as p}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as c}from"./constants.js";import{useDate as u}from"./use-date.js";const f=a(((a,f)=>{let{initialDate:b,dateFormat:g=c,firstDayOfWeek:h=1,disabled:v,monthNames:D,weekdayNames:j,size:y="md",labels:O={open:"Open calendar",next:"Next month",previous:"Previous month"},revalidate:N}=a,k=function(e,t){if(null==e)return{};var a,o,n={},s=Object.keys(e);for(o=0;o<s.length;o++)a=s[o],t.indexOf(a)>=0||(n[a]=e[a]);return n}(a,e);const{date:w,dateString:x,setDate:z}=u(b,g),[C,I]=o(!1),F=n(null),S=n(null);return s(i,{css:{position:"relative"}},s(d,Object.assign({name:"date",disabled:v,size:y},k,{onChange:e=>z(e.target.value,!0),value:x,ref:f})),s(p,{modal:!0,open:C,onOpenChange:I},s(p.Trigger,{asChild:!0},s(r,{css:{position:"absolute",top:0,right:0},disabled:v,label:O.open,size:"sm"===y?"md":"lg",theme:"neutral"},s(m,{size:"sm",is:t}))),s(p.Content,{css:{pr:"$sizes$2"},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:e=>{var t,a;(e.preventDefault(),w)?null==(t=S.current)||t.focus():null==(a=F.current)||a.focus()}},s(l,{date:w||new Date,selected:w,onDateSelected:async e=>{I(!1),await z(e.date,!1),N&&N()},refDateToday:F,refDateSelected:S,firstDayOfWeek:h,monthNames:D,weekdayNames:j,labels:O}))))}));f.displayName="DateInput";export{f as DateInput};

package/dist/components/date-input/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";

package/dist/components/date-input/constants.js

@@ -0,0 +1 @@
+const Y="DD/MM/YYYY";export{Y as DEFAULT_DATE_FORMAT};

package/dist/components/date-input/index.d.ts

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

package/dist/components/date-input/use-date.d.ts

@@ -0,0 +1,5 @@
+export declare const useDate: (initialDate: Date | undefined, dateFormat?: string) => {
+    dateString: string;
+    date: Date | undefined;
+    setDate: (inputDate: Date | string, isDateString: boolean) => void;
+};

package/dist/components/date-input/use-date.js

@@ -0,0 +1 @@
+import t from"dayjs";import o from"dayjs/plugin/customParseFormat";import{useState as r}from"react";import{DEFAULT_DATE_FORMAT as a}from"./constants.js";t.extend(o);const e=(o,e=a)=>{const[m,s]=r(o?t(o).toDate():void 0),[i,n]=r(o?t(o).format(e):"");return{dateString:i,date:m,setDate:(o,r=!1)=>{const a=r?t(o,e):t(o);s(a.isValid()?a.toDate():void 0),n(r?o:a.format(e))}}};export{e as useDate};

package/dist/components/dialog/DialogContent.d.ts

@@ -268,6 +268,7 @@ declare const StyledDialogContent: import("@stitches/react/types/styled-componen
 }>>;
 declare type DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {
     closeDialogText?: string;
+    showCloseButton?: boolean;
 };
 export declare const DialogContent: React.FC<DialogContentProps>;
 export {};

package/dist/components/dialog/DialogContent.js

@@ -1 +1 @@
-const t=["size","children","closeDialogText"];import{Close as o}from"@atom-learning/icons";import{Overlay as i,Content as e,Close as a}from"@radix-ui/react-dialog";import{createElement as s,Fragment as r}from"react";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{fadeIn as m,fadeOut as d}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const f=n({"0%":{transform:"translate3d(-50%, 50vh, 0)"},"100%":{transform:"translate3d(-50%, -50%, 0)"}}),u=n({"0%":{transform:"translate3d(-50%, -50%, 0)"},"100%":{transform:"translate3d(-50%, 50vh, 0)"}}),h=l(i,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${m} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 550ms ease-out`}}}),x=l(e,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:"translate3d(-50%, -50%, 0)","&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${f} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${u} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),b=i=>{let{size:e="sm",children:n,closeDialogText:l="Close dialog"}=i,m=function(t,o){if(null==t)return{};var i,e,a={},s=Object.keys(t);for(e=0;e<s.length;e++)i=s[e],o.indexOf(i)>=0||(a[i]=t[i]);return a}(i,t);return s(r,null,s(h,null),s(x,Object.assign({size:e},m),s(c,{as:a,css:{position:"absolute",right:"$4",top:"$4"},label:l,size:"lg",theme:"neutral"},s(p,{is:o})),n))};export{b as DialogContent};
+const t=["size","children","closeDialogText","showCloseButton"];import{Close as o}from"@atom-learning/icons";import{Overlay as i,Content as e,Close as s}from"@radix-ui/react-dialog";import{createElement as a,Fragment as r}from"react";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{fadeIn as m,fadeOut as d}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const u=n({"0%":{transform:"translate3d(-50%, 50vh, 0)"},"100%":{transform:"translate3d(-50%, -50%, 0)"}}),f=n({"0%":{transform:"translate3d(-50%, -50%, 0)"},"100%":{transform:"translate3d(-50%, 50vh, 0)"}}),h=l(i,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${m} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 550ms ease-out`}}}),x=l(e,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:"translate3d(-50%, -50%, 0)","&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${u} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${f} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),b=i=>{let{size:e="sm",children:n,closeDialogText:l="Close dialog",showCloseButton:m=!0}=i,d=function(t,o){if(null==t)return{};var i,e,s={},a=Object.keys(t);for(e=0;e<a.length;e++)i=a[e],o.indexOf(i)>=0||(s[i]=t[i]);return s}(i,t);return a(r,null,a(h,null),a(x,Object.assign({size:e},d),m&&a(c,{as:s,css:{position:"absolute",right:"$4",top:"$4"},label:l,size:"lg",theme:"neutral"},a(p,{is:o})),n))};export{b as DialogContent};

package/dist/components/index.d.ts

@@ -9,6 +9,8 @@ export { Checkbox } from './checkbox';
 export { CheckboxField } from './checkbox-field';
 export { Combobox } from './combobox';
 export { Dialog } from './dialog';
+export { DateInput } from './date-input';
+export { DateField } from './date-field';
 export { Divider } from './divider';
 export { DropdownMenu } from './dropdown-menu';
 export { FieldWrapper, InlineFieldWrapper } from './field-wrapper';
@@ -31,11 +33,13 @@ export { PasswordInput } from './password-input';
 export { Popover } from './popover';
 export { ProgressBar } from './progress-bar';
 export { RadioButton, RadioButtonGroup } from './radio-button';
-export { RadioCard, RadioCardGroup } from './radio-card';
 export { RadioButtonField } from './radio-button-field';
+export { RadioCard, RadioCardGroup } from './radio-card';
 export { SearchInput } from './search-input';
 export { Select } from './select';
 export { SelectField } from './select-field';
+export { Slider } from './slider';
+export { SliderField } from './slider-field';
 export { Stack } from './stack';
 export { StackContent } from './stack-content';
 export { Switch } from './switch';

package/dist/components/popover/PopoverContent.d.ts

@@ -269,6 +269,7 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
 }>>;
 declare type PopoverContentProps = React.ComponentProps<typeof StyledContent> & React.ComponentProps<typeof Content> & {
     closePopoverText?: string;
+    showCloseButton?: boolean;
 };
 export declare const PopoverContent: React.FC<PopoverContentProps>;
 export {};

package/dist/components/popover/PopoverContent.js

@@ -1 +1 @@
-const i=["children","side","sideOffset","closePopoverText","size"];import{Close as t}from"@atom-learning/icons";import{Content as e,Arrow as o,Close as a}from"@radix-ui/react-popover";import{createElement as s}from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{slideDownAndFade as n,slideLeftAndFade as m,slideUpAndFade as d,slideRightAndFade as p}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";const f=r(e,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative","@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:n},'&[data-side="right"]':{animationName:m},'&[data-side="bottom"]':{animationName:d},'&[data-side="left"]':{animationName:p}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),h=r(o,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=e=>{let{children:o,side:r="top",sideOffset:n=8,closePopoverText:m="Close popover",size:d="md"}=e,p=function(i,t){if(null==i)return{};var e,o,a={},s=Object.keys(i);for(o=0;o<s.length;o++)e=s[o],t.indexOf(e)>=0||(a[e]=i[e]);return a}(e,i);return s(f,Object.assign({size:d,side:r,sideOffset:n},p),s(l,{as:a,css:{position:"absolute",right:"$0",top:"$0"},label:m,size:"lg",theme:"neutral"},s(c,{is:t})),o,s(h,{width:16,height:8}))};export{u as PopoverContent};
+const i=["children","side","sideOffset","closePopoverText","showCloseButton","size"];import{Close as t}from"@atom-learning/icons";import{Content as e,Arrow as o,Close as s}from"@radix-ui/react-popover";import{createElement as a}from"react";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{slideDownAndFade as r,slideLeftAndFade as m,slideUpAndFade as d,slideRightAndFade as l}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";const f=n(e,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative","@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:r},'&[data-side="right"]':{animationName:m},'&[data-side="bottom"]':{animationName:d},'&[data-side="left"]':{animationName:l}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),h=n(o,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=e=>{let{children:o,side:n="top",sideOffset:r=8,closePopoverText:m="Close popover",showCloseButton:d=!0,size:l="md"}=e,u=function(i,t){if(null==i)return{};var e,o,s={},a=Object.keys(i);for(o=0;o<a.length;o++)e=a[o],t.indexOf(e)>=0||(s[e]=i[e]);return s}(e,i);return a(f,Object.assign({size:l,side:n,sideOffset:r},u),d&&a(p,{as:s,css:{position:"absolute",right:"$0",top:"$0"},label:m,size:"lg",theme:"neutral"},a(c,{is:t})),o,a(h,{width:16,height:8}))};export{u as PopoverContent};

package/dist/components/search-input/SearchInput.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { Input } from '../../components/input';
 import { CSS } from '../../stitches';
-import { Input } from '../input/Input';
 declare type SearchInputProps = React.ComponentProps<typeof Input> & {
     size: 'sm' | 'md';
     css?: CSS;
+    value?: string;
+    clearText?: string;
 };
 export declare const SearchInput: React.FC<SearchInputProps>;
 export {};

package/dist/components/search-input/SearchInput.js

@@ -1 +1 @@
-const t=["size","css"];function o(){return(o=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var s in r)Object.prototype.hasOwnProperty.call(r,s)&&(t[s]=r[s])}return t}).apply(this,arguments)}import{Search as r}from"@atom-learning/icons";import{createElement as s,Fragment as n}from"react";import{Box as e}from"../box/Box.js";import{Icon as i}from"../icon/Icon.js";import{Input as c}from"../input/Input.js";const p=p=>{let{size:a,css:l}=p,m=function(t,o){if(null==t)return{};var r,s,n={},e=Object.keys(t);for(s=0;s<e.length;s++)r=e[s],o.indexOf(r)>=0||(n[r]=t[r]);return n}(p,t);return s(e,{css:o({position:"relative"},l)},s(n,null,s(i,{is:r,css:{color:"$tonal300",pointerEvents:"none",position:"absolute",size:"sm"===a?"$1":20,top:"sm"===a?"$2":10,left:"sm"===a?"$2":10}}),s(c,Object.assign({size:a,css:{pl:"sm"===a?"$5":"$6"}},m,{type:"search"}))))};p.displayName="SearchInput";export{p as SearchInput};
+const t=["size","css","value","clearText"];function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var s=arguments[e];for(var o in s)Object.prototype.hasOwnProperty.call(s,o)&&(t[o]=s[o])}return t}).apply(this,arguments)}import{Search as s,Close as o}from"@atom-learning/icons";import{useState as r,createElement as i}from"react";import{ActionIcon as n}from"../action-icon/ActionIcon.js";import{Box as a}from"../box/Box.js";import{Icon as c}from"../icon/Icon.js";import{Input as l}from"../input/Input.js";import{styled as p}from"../../stitches.js";var u;!function(t){t.SEARCH="SEARCH",t.CLEAR="CLEAR"}(u||(u={}));const m=p(c,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),h=p(l,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),f=l=>{let{size:p="md",css:f,value:b,clearText:v="Clear"}=l,C=function(t,e){if(null==t)return{};var s,o,r={},i=Object.keys(t);for(o=0;o<i.length;o++)s=i[o],e.indexOf(s)>=0||(r[s]=t[s]);return r}(l,t);const[g,A]=r(b||""),[E,R]=r(b?u.CLEAR:u.SEARCH),j=()=>{A(""),R(u.SEARCH)};return i(a,{css:e({position:"relative"},f)},i(h,Object.assign({size:p,type:"search"},C,{value:g,onChange:t=>{A(t.target.value),R(t.target.value?u.CLEAR:u.SEARCH)},css:{pr:"sm"===p?"$5":"$6"}})),E===u.SEARCH?i(m,{is:s,size:p,css:{size:"sm"==p?"$1":20}}):i(n,{label:v,theme:"neutral",size:"sm"==p?"md":"lg",css:{position:"absolute",top:0,right:0},onClick:j},i(c,{is:o})))};f.displayName="SearchInput";export{f as SearchInput};