feat: continue

.storybook/preview-body.html

@@ -0,0 +1,5 @@
+<style>
+  body {
+    color: #ffffff;
+  }
+</style>

packages/components/package.json

@@ -44,6 +44,7 @@
     "@interlay/system": "workspace:*",
     "@interlay/theme": "workspace:*",
     "@interlay/themev2": "workspace:*",
+    "@radix-ui/react-slot": "^1.0.2",
     "@react-aria/accordion": "3.0.0-alpha.20",
     "@react-aria/breadcrumbs": "^3.5.4",
     "@react-aria/button": "^3.8.1",

packages/components/src/Button/Button.stories.tsx

@@ -28,6 +28,14 @@ export const Icon: StoryObj<ButtonProps> = {
   }
 };
 
+export const Link: StoryObj<ButtonProps> = {
+  args: {
+    asChild: true,
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    children: <a href='#'>Link</a>
+  }
+};
+
 // export const Secondary: StoryObj<ButtonProps> = {
 //   args: {
 //     variant: 'secondary'

packages/components/src/Button/Button.tsx

@@ -5,6 +5,7 @@ import { mergeProps } from '@react-aria/utils';
 import { PressEvent } from '@react-types/shared';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
 import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/themev2';
+import { Slot, Slottable } from '@radix-ui/react-slot';
 
 import { Flex } from '../Flex';
 import { Spinner } from '../Spinner';
@@ -39,6 +40,7 @@ type Props = {
   color?: ButtonColors;
   loading?: boolean;
   isIconOnly?: boolean;
+  asChild?: boolean;
   onPress?: (e: PressEvent) => void;
 };
 
@@ -59,6 +61,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       isIconOnly,
       onPress,
       onClick,
+      asChild,
       ...props
     },
     ref
@@ -70,6 +73,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const { buttonProps } = useButton({ isDisabled, onPress, ...props }, domRef);
     const { focusProps, isFocusVisible } = useFocusRing(props);
 
+    const Comp = asChild ? Slot : 'button';
+
     return (
       <StyledButton
         ref={domRef}
@@ -79,6 +84,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         $isIconOnly={isIconOnly}
         $size={size}
         $variant={variant}
+        as={Comp}
         disabled={isDisabled}
         {...mergeProps(props, buttonProps, focusProps, { onClick })}
       >
@@ -87,7 +93,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             <Spinner aria-label='Loading...' color={spinnerColorMap[color][variant]} size={spinnerSizeMap[size]} />
           </Flex>
         )}
-        {isIconOnly ? (loading ? undefined : children) : children}
+        {isIconOnly ? loading ? undefined : <Slottable>{children}</Slottable> : <Slottable>{children}</Slottable>}
       </StyledButton>
     );
   }

packages/components/src/Dialog/Dialog.style.tsx

@@ -1,54 +1,49 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { DialogSize } from '@interlay/themev2';
 
-import { theme } from '../../../core/theme/src';
-import { Sizes } from '../../../core/theme/src';
-import { CTA } from '../CTA';
-import { Divider } from '../Divider';
 import { Flex } from '../Flex';
 import { H3 } from '../Text';
+import { Button } from '../Button';
 
 type StyledDialogProps = {
-  $size: Sizes;
+  $size: DialogSize;
 };
 
 const StyledDialog = styled.section<StyledDialogProps>`
-  background: ${theme.colors.bgPrimary};
-  border: ${theme.border.default};
-  border-radius: ${theme.rounded.md};
-  color: ${theme.colors.textPrimary};
   max-width: 100%;
-  width: ${({ $size }) => theme.dialog[$size].width};
   display: flex;
   flex-direction: column;
   position: relative;
   outline: none;
+
+  ${({ theme, $size }) => css`
+    ${theme.dialog.base}
+    ${theme.dialog.size[$size].base}
+  `}
 `;
 
-const StyledCloseCTA = styled(CTA)`
+const StyledCloseCTA = styled(Button)`
   position: absolute;
-  top: ${theme.spacing.spacing2};
-  right: ${theme.spacing.spacing2};
-  z-index: ${theme.dialog.closeBtn.zIndex};
+  top: ${({ theme }) => theme.spacing('s')};
+  right: ${({ theme }) => theme.spacing('s')};
+  z-index: 100;
 `;
 
 const StyledDialogHeader = styled(H3)<StyledDialogProps>`
-  padding: ${({ $size }) => theme.dialog[$size].header.padding};
-  overflow: hidden;
-  flex-shrink: 0;
-`;
+  ${({ $size, theme }) => theme.dialog.size[$size].header};
 
-const StyledDialogDivider = styled(Divider)<StyledDialogProps>`
-  margin: ${({ $size }) => `0 ${theme.dialog[$size].divider.marginX} ${theme.dialog[$size].divider.marginBottom}`};
+  overflow: hidden;
   flex-shrink: 0;
 `;
 
 const StyledDialogBody = styled(Flex)<StyledDialogProps>`
-  padding: ${({ $size }) => `${theme.dialog[$size].body.paddingY} ${theme.dialog[$size].body.paddingX}`};
+  ${({ $size, theme }) => theme.dialog.size[$size].body};
+
   flex: 1 1 auto;
 `;
 
 const StyledDialogFooter = styled(Flex)<StyledDialogProps>`
-  padding: ${({ $size }) => theme.dialog[$size].footer.padding};
+  ${({ $size, theme }) => theme.dialog.size[$size].footer};
 `;
 
-export { StyledCloseCTA, StyledDialog, StyledDialogBody, StyledDialogDivider, StyledDialogFooter, StyledDialogHeader };
+export { StyledCloseCTA, StyledDialog, StyledDialogBody, StyledDialogFooter, StyledDialogHeader };