@atom-learning/components 2.29.1-beta.0 → 2.30.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [2.30.0](https://github.com/Atom-Learning/components/compare/v2.29.1...v2.30.0) (2023-01-30)
+
+
+### Bug Fixes
+
+* add utils and media in colorscheme stitches ([8a1211a](https://github.com/Atom-Learning/components/commit/8a1211af9821e0217da866a374661606d381e874))
+* correct TabsTrigger to be a button ([c2776e0](https://github.com/Atom-Learning/components/commit/c2776e0fb357fa528da5c07eb8a975ae4f5e4333))
+* documentation ([5036ad2](https://github.com/Atom-Learning/components/commit/5036ad2d7c277f3c4c224fa2ce4431fcf3eceaa8))
+* json files in rollup ([6bb728a](https://github.com/Atom-Learning/components/commit/6bb728a8cb6c28e81c62e2d02d8afbe88e6c56ec))
+* move css of TabsTriggerList Container in a styled (rather than inlining) ([303da25](https://github.com/Atom-Learning/components/commit/303da257f5a55a56b80496365b330e07a836af83))
+* subpixel catch for TabsTriggerList canScrollRight ([ebfc568](https://github.com/Atom-Learning/components/commit/ebfc568b6603ee323f4bc84429c083fc0f02848e))
+* update Tabs snapshot ([8a7b6f8](https://github.com/Atom-Learning/components/commit/8a7b6f83074b09b9e4e7fe83f5b8c5993931510f))
+* validation and asChild ColorScheme ([19b4379](https://github.com/Atom-Learning/components/commit/19b4379674023528cadfaed828e1b77646cf4edf))
+
+
+### Features
+
+* move color-scheme into lib ([38e63d5](https://github.com/Atom-Learning/components/commit/38e63d5e40e769cd43c0423936edc7ac0879d7f9))
+* re-add ActionIcon Chevrons to TabsTriggerList ([1a5b7de](https://github.com/Atom-Learning/components/commit/1a5b7dec9405ba5dd0b494714f959ce9fa48e9e9))
+
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 
 

package/dist/components/accordion/AccordionTrigger.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorScheme } from '../../../../color-scheme/dist';
+import { ColorScheme } from '../../experiments/color-scheme';
 declare const StyledTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
     sm: string;
     md: string;

package/dist/components/accordion/AccordionTrigger.js

@@ -0,0 +1 @@
+import{ChevronDown as i}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{styled as t}from"../../stitches.js";import{Icon as n}from"../icon/Icon.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import{ColorScheme as d}from"../../experiments/color-scheme/ColorScheme.js";const l=t(n,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),m=t(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...c()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:o,colorScheme:r={},...a})=>e.createElement(d,{asChild:!0,accent:"slate",interactive:"loContrast1",...r},e.createElement(m,{...a},o,e.createElement(l,{is:i})));export{f as AccordionTrigger};

package/dist/components/action-icon/ActionIcon.d.ts

@@ -1,4 +1,4 @@
-import type * as Stitches from '@stitches/react';
+import type { VariantProps } from '@stitches/react';
 import * as React from 'react';
 import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
@@ -130,150 +130,150 @@ declare const StyledButton: import("@stitches/react/types/styled-component").Sty
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: {
-        readonly [Stitches.$$PropertyValue]: "background";
+        readonly [$$PropertyValue]: "background";
     }) => {
         background: {
-            readonly [Stitches.$$PropertyValue]: "background";
+            readonly [$$PropertyValue]: "background";
         };
     };
     inset: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         top: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         right: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         bottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         left: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     size: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "size";
+        readonly [$$ScaleValue]: "size";
     }) => {
         height: string | number | {
-            readonly [Stitches.$$ScaleValue]: "size";
+            readonly [$$ScaleValue]: "size";
         };
         width: string | number | {
-            readonly [Stitches.$$ScaleValue]: "size";
+            readonly [$$ScaleValue]: "size";
         };
     };
     p: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         padding: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pt: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pr: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pb: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pl: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     px: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         paddingRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     py: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         paddingBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     m: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         margin: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mt: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mr: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mb: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     ml: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mx: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         marginRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     my: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         marginBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
 }>>;
-declare type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, Stitches.VariantProps<typeof StyledButton> & {
+declare type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, VariantProps<typeof StyledButton> & {
     as?: string | React.ReactNode;
     children: React.ReactNode;
     label: string;

package/dist/components/avatar/Avatar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { AvatarPlaceholder } from './AvatarPlaceholder';
 import { AvatarIcon } from './AvatarIcon';
-import { AvatarInitial } from './AvatarInitial';
 import { AvatarImage } from './AvatarImage';
+import { AvatarInitial } from './AvatarInitial';
+import { AvatarPlaceholder } from './AvatarPlaceholder';
 declare const StyledDiv: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
 }, {

package/dist/{lib/src/components → components}/avatar/Avatar.js

@@ -1 +1 @@
-import*as o from"react";import{styled as n}from"../../stitches.js";import{AvatarPlaceholder as v}from"./AvatarPlaceholder.js";import{AvatarIcon as u}from"./AvatarIcon.js";import{AvatarInitial as b}from"./AvatarInitial.js";import{AvatarImage as p}from"./AvatarImage.js";import{focusVisibleStyleBlock as z}from"../../utilities/style/focus-visible-style-block.js";const s={display:"flex",justifyContent:"center",alignItems:"center",color:"$tonal400",borderRadius:"$round",border:"2px solid $tonal100",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},f=n("div",s),$=n("button",{all:"unset",...s,"&:not([disabled])":{"&:hover":{borderColor:"$tonal400",backgroundColor:"$tonal50"},"&:active":{borderColor:"$primary",backgroundColor:"$tonal100"},"&:focus-visible":z()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),d=o.createContext({name:void 0,size:"lg"}),m=({children:a,name:e,size:i})=>{const t=o.useMemo(()=>({name:e,size:i}),[e,i]);return o.createElement(d.Provider,{value:t},a)},c=({children:a,size:e="lg",name:i,disabled:t=!1,onClick:l})=>o.createElement(m,{name:i,size:e},l?o.createElement($,{size:e,disabled:t,onClick:t?void 0:l,css:{cursor:t?"auto":"pointer"}},a):o.createElement(f,{size:e},a)),r=c;r.Image=p,r.Initial=b,r.Placeholder=v,r.Icon=u,r.displayName="Avatar";export{r as Avatar,c as AvatarRoot,d as AvatarRootContext,m as AvatarRootProvider};
+import*as o from"react";import{styled as n}from"../../stitches.js";import{AvatarIcon as v}from"./AvatarIcon.js";import{AvatarImage as u}from"./AvatarImage.js";import{AvatarInitial as b}from"./AvatarInitial.js";import{AvatarPlaceholder as p}from"./AvatarPlaceholder.js";import{focusVisibleStyleBlock as z}from"../../utilities/style/focus-visible-style-block.js";const s={display:"flex",justifyContent:"center",alignItems:"center",color:"$tonal400",borderRadius:"$round",border:"2px solid $tonal100",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},f=n("div",s),$=n("button",{all:"unset",...s,"&:not([disabled])":{"&:hover":{borderColor:"$tonal400",backgroundColor:"$tonal50"},"&:active":{borderColor:"$primary",backgroundColor:"$tonal100"},"&:focus-visible":z()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),d=o.createContext({name:void 0,size:"lg"}),m=({children:a,name:e,size:i})=>{const t=o.useMemo(()=>({name:e,size:i}),[e,i]);return o.createElement(d.Provider,{value:t},a)},c=({children:a,size:e="lg",name:i,disabled:t=!1,onClick:l})=>o.createElement(m,{name:i,size:e},l?o.createElement($,{size:e,disabled:t,onClick:t?void 0:l,css:{cursor:t?"auto":"pointer"}},a):o.createElement(f,{size:e},a)),r=c;r.Image=u,r.Initial=b,r.Placeholder=p,r.Icon=v,r.displayName="Avatar";export{r as Avatar,c as AvatarRoot,d as AvatarRootContext,m as AvatarRootProvider};

package/dist/{lib/src/components → components}/avatar/AvatarPlaceholder.js

@@ -1 +1 @@
-import*as e from"react";import{User as o}from"@atom-learning/icons";import{Box as r}from"../box/Box.js";import{Icon as t}from"../icon/Icon.js";const s=()=>e.createElement(r,{css:{position:"relative",size:"100%"}},e.createElement(t,{is:o,css:{size:"100%"}}));export{s as AvatarPlaceholder};
+import{User as o}from"@atom-learning/icons";import*as e from"react";import{Box as r}from"../box/Box.js";import{Icon as t}from"../icon/Icon.js";const s=()=>e.createElement(r,{css:{position:"relative",size:"100%"}},e.createElement(t,{is:o,css:{size:"100%"}}));export{s as AvatarPlaceholder};

package/dist/{lib/src/components → components}/badge/Badge.js

@@ -1 +1 @@
-import*as t from"react";import{styled as m}from"../../stitches.js";import{Box as l}from"../box/Box.js";import{Flex as a}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";const c=m(a,{justifyContent:"center",alignItems:"center",borderRadius:"$0",minWidth:0,border:"1px solid #FFFFFF",fontFamily:"$body","& > *:not(:last-child)":{mr:"$1"},variants:{theme:{success:{bg:"$successLight",color:"$successMid"},warning:{bg:"$warningLight",color:"$warningText"},danger:{bg:"$dangerLight",color:"$dangerMid"},neutral:{bg:"$tonal50",color:"$tonal400"},info:{bg:"$primaryLight",color:"$primaryMid"}},size:{xs:{fontSize:"$sm",px:"$1",height:"$2"},sm:{fontSize:"$md",px:"$1",height:"$3"},md:{fontSize:"$md",px:"$2",height:"$4"}}}}),i=({theme:r="info",size:o="sm",children:n,...s})=>t.createElement(c,{role:"status",theme:r,size:o,...s},t.Children.map(n,e=>{if(typeof e=="string")return t.createElement(l,{css:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis",py:"$0"}},e);if(t.isValidElement(e)&&e.type===d)return t.cloneElement(e,{size:"sm",css:{...e.props.css,flexShrink:0}})}));i.displayName="Badge";export{i as Badge};
+import*as t from"react";import{styled as m}from"../../stitches.js";import{Box as l}from"../box/Box.js";import{Flex as a}from"../flex/Flex.js";import{Icon as c}from"../icon/Icon.js";const d=m(a,{justifyContent:"center",alignItems:"center",borderRadius:"$0",minWidth:0,border:"1px solid #FFFFFF",fontFamily:"$body","& > *:not(:last-child)":{mr:"$1"},variants:{theme:{success:{bg:"$successLight",color:"$successMid"},warning:{bg:"$warningLight",color:"$warningText"},danger:{bg:"$dangerLight",color:"$dangerMid"},neutral:{bg:"$tonal50",color:"$tonal400"},info:{bg:"$primaryLight",color:"$primaryMid"}},size:{xs:{fontSize:"$sm",px:"$1",height:"$2"},sm:{fontSize:"$md",px:"$1",height:"$3"},md:{fontSize:"$md",px:"$2",height:"$4"}}}}),i=({theme:r="info",size:o="sm",children:n,...s})=>t.createElement(d,{role:"status",theme:r,size:o,...s},t.Children.map(n,e=>{if(typeof e=="string"||typeof e=="number")return t.createElement(l,{css:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis",py:"$0"}},e);if(t.isValidElement(e)&&e.type===c)return t.cloneElement(e,{size:"sm",css:{...e.props.css,flexShrink:0}})}));i.displayName="Badge";export{i as Badge};

package/dist/components/button/Button.d.ts

@@ -1,4 +1,4 @@
-import type * as Stitches from '@stitches/react';
+import type { VariantProps } from '@stitches/react';
 import * as React from 'react';
 import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
@@ -8,7 +8,6 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     size?: "sm" | "md" | "lg" | undefined;
     isLoading?: boolean | "true" | undefined;
     fullWidth?: boolean | "true" | "false" | undefined;
-    isRounded?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;
@@ -132,150 +131,150 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: {
-        readonly [Stitches.$$PropertyValue]: "background";
+        readonly [$$PropertyValue]: "background";
     }) => {
         background: {
-            readonly [Stitches.$$PropertyValue]: "background";
+            readonly [$$PropertyValue]: "background";
         };
     };
     inset: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         top: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         right: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         bottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         left: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     size: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "size";
+        readonly [$$ScaleValue]: "size";
     }) => {
         height: string | number | {
-            readonly [Stitches.$$ScaleValue]: "size";
+            readonly [$$ScaleValue]: "size";
         };
         width: string | number | {
-            readonly [Stitches.$$ScaleValue]: "size";
+            readonly [$$ScaleValue]: "size";
         };
     };
     p: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         padding: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pt: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pr: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pb: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     pl: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     px: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         paddingRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     py: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         paddingTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         paddingBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     m: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         margin: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mt: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mr: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mb: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     ml: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     mx: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginLeft: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         marginRight: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
     my: (value: string | number | {
-        readonly [Stitches.$$ScaleValue]: "space";
+        readonly [$$ScaleValue]: "space";
     }) => {
         marginTop: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
         marginBottom: string | number | {
-            readonly [Stitches.$$ScaleValue]: "space";
+            readonly [$$ScaleValue]: "space";
         };
     };
 }>>;
-declare type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, Stitches.VariantProps<typeof StyledButton> & {
+declare type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, VariantProps<typeof StyledButton> & {
     as?: React.ComponentType | React.ElementType;
     children: React.ReactNode;
     isLoading?: boolean;

package/dist/components/button/Button.js

@@ -0,0 +1 @@
+import{darken as i,opacify as s}from"color2k";import*as o from"react";import{Box as b}from"../box/Box.js";import{Icon as w}from"../icon/Icon.js";import{Loader as k}from"../loader/Loader.js";import{styled as v,theme as l}from"../../stitches.js";const d=(e,r,a)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:a}}),n=(e,r,a,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:a}}),p=v("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:n("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:n("$primaryDark",i(l.colors.primaryDark.value,.1),i(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:n("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:n("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:n("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:n("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:d("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:d("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:d("$primaryDark",i(l.colors.primaryDark.value,.1),i(l.colors.primaryDark.value,.15))}]}),D=({isLoading:e,children:r})=>o.createElement(o.Fragment,null,o.createElement(k,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),o.createElement(b,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),x=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>o.Children.map(e,(a,t)=>(a==null?void 0:a.type)===w?o.cloneElement(a,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:x(r),...a.props.css?a.props.css:{}}}):a),u=o.forwardRef(({children:e,isLoading:r,onClick:a,href:t,appearance:h="solid",size:c="md",theme:y="primary",type:g="button",...$},f)=>o.createElement(p,{isLoading:r||!1,onClick:r?void 0:a,appearance:h,size:c,theme:y,...$,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:g},ref:f},typeof r=="boolean"?o.createElement(D,{isLoading:r},m(e,c)):m(e,c)));u.displayName="Button";export{u as Button,p as StyledButton};

package/dist/components/calendar/Calendar.js

@@ -0,0 +1 @@
+import{ChevronLeft as q,ChevronRight as H}from"@atom-learning/icons";import{useDayzed as J}from"dayzed";import*as e from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as h}from"../box/Box.js";import{Button as C}from"../button/Button.js";import{Flex as Y}from"../flex/Flex.js";import{Icon as w}from"../icon/Icon.js";import{Text as K}from"../text/Text.js";import{styled as F}from"../../stitches.js";import{monthNamesShort as Q,weekdayNamesShort as V,DEFAULT_LABELS as X}from"./constants.js";import{Day as Z}from"./Day.js";const g=F("div",{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gridGap:"$1 $2"}),ee=F(C,{color:"$tonal600",p:"$3",width:"$6",variants:{selected:{false:{color:"$tonal600 !important",fontWeight:"400","&:hover":{bg:"$tonal100 !important",color:"$tonal600 !important"},"&[disabled]":{bg:"white !important"}}}}}),te=(i,c)=>{const u=i.slice(0,c);return i.slice(c).concat(u)},S=({css:i,refDateSelected:c,refDateToday:u,firstDayOfWeek:f=0,monthNames:N=Q,weekdayNames:T=V,labels:y=X,date:n=new Date,minDate:l,maxDate:m,setYear:A,...L})=>{const[a,E]=e.useState(!1),[s,k]=e.useState(n==null?void 0:n.getFullYear()),O=t=>{const r=n;r.setFullYear(t),A(r),E(!1)},W=l&&s-16<=l.getFullYear(),z=m&&s>=m.getFullYear(),B=Array.from({length:16},(t,r)=>{const o=s-r;return m&&o>m.getFullYear()||l&&o<l.getFullYear()?0:o}),{calendars:d,getBackProps:I,getForwardProps:M,getDateProps:G}=J({firstDayOfWeek:f,showOutsideDays:!0,date:n,minDate:l,maxDate:m,...L});return d.length?e.createElement(h,{css:{position:"relative",width:"min-content",mt:"-$1",...i}},e.createElement(Y,{css:{position:"absolute",top:0,right:"-$1"}},e.createElement(x,{label:y[a?"previousYear":"previous"],theme:"neutral",size:"md",...!a&&I({calendars:d}),...a&&{onClick:()=>k(s-16)},disabled:a&&W},e.createElement(w,{is:q})),e.createElement(x,{label:y[a?"nextYear":"next"],theme:"neutral",size:"md",...!a&&M({calendars:d}),...a&&{onClick:()=>k(s+16)},disabled:a&&z},e.createElement(w,{is:H}))),a&&e.createElement(g,{css:{gridTemplateColumns:"repeat(4, 1fr)",pt:"$7",direction:"rtl",gridGap:"$3 $1"}},B.map((t,r)=>{const o=t===n.getFullYear();return t?e.createElement(ee,{key:`${t}${r}`,theme:o?"primary":"neutral",onClick:()=>O(t),selected:o},t):e.createElement(h,{key:r,css:{width:"$6",height:"$4"}})})),!a&&d.map(({month:t,year:r,weeks:o})=>e.createElement(h,{key:`${t}${r}`},e.createElement(Y,{css:{height:"$4",alignItems:"center",mb:"$4"}},e.createElement(C,{theme:"neutral",css:{px:"0",color:"$tonal600"},onClick:()=>E(!0)},N[t]," ",r)),e.createElement(g,{css:{mb:"$3"}},te(T,f).map(p=>e.createElement(K,{as:"span",size:"sm",key:`${t}${r}${p}`,css:{fontWeight:600,textAlign:"center"}},p))),e.createElement(g,null,o.map((p,P)=>p.map(($,j)=>{const D=`${t}${r}${P}${j}`;if(!$)return e.createElement("div",{key:D});const{date:R,selected:b,today:v,prevMonth:U,nextMonth:_}=$;return e.createElement(Z,{isOutsideMonth:U||_,isSelected:b,isToday:v,key:D,ref:b?c:v?u:null,...G({dateObj:$}),type:"button"},R.getDate())})))))):null};S.displayName="Calendar";export{S as Calendar};

package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import * as React from 'react';
 declare const StyledChipToggleGroupItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("../chip/Chip").TChipRootProps> & {
     Content: ({ children, ...rest }: {
         [x: string]: any;

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js

@@ -0,0 +1 @@
+import{Ok as i}from"@atom-learning/icons";import*as m from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as t}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as s}from"../icon/Icon.js";import{styled as r}from"../../stitches.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";const e=r(s,{display:"none"}),p=r(t,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$tonal100",color:"$tonal600",borderColor:"currentColor"},"&:focus-visible":{...c()},'&[data-state="on"]':{"&:hover":{bg:"$white",color:"$primaryDark"}}},'&[data-state="off"]':{color:"$tonal400",bg:"$tonal50",borderColor:"$tonal200"},'&[data-state="on"]':{[`& ${e}`]:{display:"block"}}}),d=({size:l="md",children:a,...n})=>o.createElement(m.Item,{...n,asChild:!0},o.createElement(p,{asWorkaround:"button"},o.createElement(e,{is:i,size:l==="lg"?"md":"sm"}),o.createElement(t.Content,null,a)));export{d as ChipToggleGroupItem};

package/dist/{lib/src/components → components}/chip-toggle-group/ChipToggleGroupRoot.js

@@ -1 +1 @@
-import*as e from"@radix-ui/react-toggle-group";import*as o from"react";import"../chip/Chip.js";import{ChipGroup as i}from"../chip/ChipGroup.js";const m=o.forwardRef((r,t)=>o.createElement(i,{ref:t,as:e.Root,orientation:"horizontal",...r}));export{m as ChipToggleGroupRoot};
+import*as e from"@radix-ui/react-toggle-group";import*as o from"react";import"../chip/Chip.js";import{ChipGroup as i}from"../chip/ChipGroup.js";const p=o.forwardRef((r,t)=>o.createElement(i,{ref:t,as:e.Root,orientation:"horizontal",...r}));export{p as ChipToggleGroupRoot};

package/dist/components/data-table/DataTable.js

@@ -0,0 +1 @@
+import*as r from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as e}from"./DataTableContext.js";import{DataTableDataCell as m}from"./DataTableDataCell.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as p}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableTable as f}from"./DataTableTable.js";import"./drag-and-drop/DragAndDropContainer.js";import"@dnd-kit/sortable";import"@dnd-kit/utilities";import"@tanstack/react-table";import"../table/Table.js";import"./drag-and-drop/Handle.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as n}from"./pagination/Pagination.js";const a=o=>r.createElement(e,{...o});a.Body=t,a.DataCell=m,a.DragAndDropTable=d,a.Head=p,a.HeaderCell=b,a.Pagination=n,a.Row=T,a.GlobalFilter=i,a.Table=f,a.Loading=D,a.Error=l;export{a as DataTable};