feat: radio accordion

components/Accordion/Accordion.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { keyframes, styled } from '../../stitches.config';
+import { keyframes, styled, VariantProps } from '../../stitches.config';
 import { elevationVariants } from '../Elevation';
 import { ChevronRightIcon } from '@radix-ui/react-icons';
-import { VariantProps } from '@stitches/react';
 
 const open = keyframes({
   from: { height: 0 },
@@ -35,13 +34,13 @@ const StyledAccordionItem = styled(AccordionPrimitive.Item, {
   boxShadow: '0 1px 0 0 $colors$divider',
 })
 
-const StyledAccordionHeader = styled(AccordionPrimitive.Header, {
+export const StyledAccordionHeader = styled(AccordionPrimitive.Header, {
   all: 'unset',
   display: 'flex',
   borderRadius: 'inherit',
 });
 
-const StyledAccordionTrigger = styled(AccordionPrimitive.Trigger, {
+export const StyledAccordionTrigger = styled(AccordionPrimitive.Trigger, {
   all: 'unset',
   borderRadius: 'inherit',
   fontFamily: 'inherit',

components/Radio/Radio.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { styled, CSS, VariantProps } from '../../stitches.config';
-import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 
 export const RadioGroup = styled(RadioGroupPrimitive.Root, {
   display: 'flex',
 });
 
-const StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
+export const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
   height: '100%',
@@ -19,12 +18,14 @@ const StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
     display: 'block',
     width: '8px',
     height: '8px',
-    borderRadius: '50%',
+    borderRadius: '$round',
     backgroundColor: '$radioIndicator',
   },
-});
+};
+
+const StyledIndicator = styled(RadioGroupPrimitive.Indicator, INDICATOR_BASE_STYLES);
 
-const StyledRadio = styled(RadioGroupPrimitive.Item, {
+export const RADIO_BASE_STYLES = {
   all: 'unset',
   boxSizing: 'border-box',
   userSelect: 'none',
@@ -49,6 +50,8 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, {
   color: '$hiContrast',
   boxShadow: 'inset 0 0 0 1px $colors$radioBorder',
   overflow: 'hidden',
+}
+const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
   '@hover': {
     '&:hover': {
       boxShadow: 'inset 0 0 0 1px $colors$radioHoverBorder',

components/RadioAccordion/RadioAccordion.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { RadioAccordionRoot, RadioAccordionItem, RadioAccordionContent, RadioAccordionTrigger } from './RadioAccordion';
+import { Box } from '../Box';
+
+export default {
+  title: 'Components/RadioAccordion',
+  component: RadioAccordionRoot,
+} as ComponentMeta<typeof RadioAccordionRoot>;
+
+export const Basic: ComponentStory<typeof RadioAccordionRoot> = (args) => (
+  <Box css={{ width: 300 }}>
+    <RadioAccordionRoot {...args}>
+      <RadioAccordionItem value="item-1">
+        <RadioAccordionTrigger >Item1 Trigger</RadioAccordionTrigger>
+        <RadioAccordionContent >Item1 Content</RadioAccordionContent>
+      </RadioAccordionItem>
+      <RadioAccordionItem value="item-2">
+        <RadioAccordionTrigger >Item2 Trigger</RadioAccordionTrigger>
+        <RadioAccordionContent >Item2 Content</RadioAccordionContent>
+      </RadioAccordionItem>
+      <RadioAccordionItem value="item-3">
+        <RadioAccordionTrigger >Item3 Trigger</RadioAccordionTrigger>
+        <RadioAccordionContent >Item3 Content</RadioAccordionContent>
+      </RadioAccordionItem>
+    </RadioAccordionRoot>
+  </Box>
+);

components/RadioAccordion/RadioAccordion.tsx

@@ -0,0 +1,62 @@
+import React, { ComponentProps } from "react";
+import { styled, VariantProps } from "../../stitches.config";
+import { StyledAccordionTrigger, StyledAccordionHeader, AccordionRoot, AccordionContent, AccordionItem, AccordionTriggerProps } from "../Accordion";
+import { INDICATOR_BASE_STYLES, RADIO_BASE_STYLES } from "../Radio";
+
+type RadioAccordionRootProps = Omit<VariantProps<typeof AccordionRoot>, 'type'>
+export const RadioAccordionRoot: (props: RadioAccordionRootProps) => JSX.Element = (props) => (
+  <AccordionRoot {...props} type='single' collapsible={false} />
+)
+export const RadioAccordionItem = React.forwardRef<React.ElementRef<typeof AccordionItem>, ComponentProps<typeof AccordionItem>>(({ value, children, ...props }, forwardedRef) => {
+
+  return (
+    <AccordionItem value={value} ref={forwardedRef} css={{ display: 'inherit', flexDirection: 'column' } as any} {...props}>
+      {children}
+    </AccordionItem>
+  );
+});
+
+const StyledRadio = styled('div', RADIO_BASE_STYLES, {
+  width: 18,
+  height: 18,
+  mr: '$2',
+})
+
+const StyledIndicator = styled('div', INDICATOR_BASE_STYLES, {
+  '&::after': {
+    '[data-state=open] &': {
+      backgroundColor: '$radioIndicator'
+    },
+    '[data-state=closed] &': {
+      backgroundColor: 'transparent',
+    }
+  },
+});
+
+const StyledRadioAccordionTrigger = styled(StyledAccordionTrigger, {
+  '@hover': {
+    '&:hover': {
+      [`& ${StyledRadio}`]: {
+        boxShadow: 'inset 0 0 0 1px $colors$radioHoverBorder',
+        backgroundColor: '$radioHoverBg',
+      }
+    }
+  }
+})
+
+export const RadioAccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof StyledRadioAccordionTrigger>, AccordionTriggerProps>(({ children, ...props }, ref) => {
+
+    return (
+      <StyledAccordionHeader>
+        <StyledRadioAccordionTrigger ref={ref} {...props}>
+          <StyledRadio >
+            <StyledIndicator />
+          </StyledRadio>
+          {children}
+        </StyledRadioAccordionTrigger>
+      </StyledAccordionHeader>
+    )
+  })
+
+export const RadioAccordionContent = AccordionContent

components/RadioAccordion/index.tsx

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

index.ts

@@ -1,4 +1,5 @@
 export { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from './components/Accordion';
+export { RadioAccordionRoot, RadioAccordionItem, RadioAccordionTrigger, RadioAccordionContent } from './components/RadioAccordion';
 export { Alert } from './components/Alert';
 export { AspectRatio } from '@radix-ui/react-aspect-ratio';
 export { Badge } from './components/Badge';