⚡ (theme) Add corner roundness customization

Closes #415

apps/builder/src/components/icons.tsx

@@ -552,3 +552,42 @@ export const CloseIcon = (props: IconProps) => (
     <line x1="6" y1="6" x2="18" y2="18"></line>
   </Icon>
 )
+
+export const NoRadiusIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 20 20" {...props}>
+    <mask id="path-1-inside-1_1009_3" fill="white">
+      <path d="M0 0H20V20H0V0Z" />
+    </mask>
+    <path
+      d="M0 0V-2H-2V0H0ZM0 20H-2V22H0V20ZM0 2H20V-2H0V2ZM20 18H0V22H20V18ZM2 20V0H-2V20H2Z"
+      fill="black"
+      mask="url(#path-1-inside-1_1009_3)"
+    />
+  </Icon>
+)
+
+export const MediumRadiusIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 20 20" {...props}>
+    <mask id="path-1-inside-1_1009_4" fill="white">
+      <path d="M0 4C0 1.79086 1.79086 0 4 0H20V20H4C1.79086 20 0 18.2091 0 16V4Z" />
+    </mask>
+    <path
+      d="M-2 4C-2 0.686292 0.686292 -2 4 -2H20V2H4C2.89543 2 2 2.89543 2 4H-2ZM20 22H4C0.686292 22 -2 19.3137 -2 16H2C2 17.1046 2.89543 18 4 18H20V22ZM4 22C0.686292 22 -2 19.3137 -2 16V4C-2 0.686292 0.686292 -2 4 -2V2C2.89543 2 2 2.89543 2 4V16C2 17.1046 2.89543 18 4 18V22ZM20 0V20V0Z"
+      fill="black"
+      mask="url(#path-1-inside-1_1009_4)"
+    />
+  </Icon>
+)
+
+export const LargeRadiusIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 20 20" {...props}>
+    <mask id="path-1-inside-1_1009_5" fill="white">
+      <path d="M0 10C0 4.47715 4.47715 0 10 0H20V20H10C4.47715 20 0 15.5228 0 10V10Z" />
+    </mask>
+    <path
+      d="M-2 10C-2 3.37258 3.37258 -2 10 -2H20V2H10C5.58172 2 2 5.58172 2 10H-2ZM20 22H10C3.37258 22 -2 16.6274 -2 10H2C2 14.4183 5.58172 18 10 18H20V22ZM10 22C3.37258 22 -2 16.6274 -2 10C-2 3.37258 3.37258 -2 10 -2V2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18V22ZM20 0V20V0Z"
+      fill="black"
+      mask="url(#path-1-inside-1_1009_5)"
+    />
+  </Icon>
+)

apps/builder/src/components/inputs/RadioButtons.tsx

@@ -0,0 +1,81 @@
+import {
+  Box,
+  Flex,
+  HStack,
+  useColorModeValue,
+  useRadio,
+  useRadioGroup,
+  UseRadioProps,
+} from '@chakra-ui/react'
+import { ReactNode } from 'react'
+
+type Props<T extends string> = {
+  options: (T | { value: T; label: ReactNode })[]
+  defaultValue: T
+  onSelect: (newValue: T) => void
+}
+export const RadioButtons = <T extends string>({
+  options,
+  defaultValue,
+  onSelect,
+}: Props<T>) => {
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    defaultValue,
+    onChange: onSelect,
+  })
+
+  const group = getRootProps()
+
+  return (
+    <HStack {...group}>
+      {options.map((item) => {
+        const radio = getRadioProps({ value: parseValue(item) })
+        return (
+          <RadioCard key={parseValue(item)} {...radio}>
+            {parseLabel(item)}
+          </RadioCard>
+        )
+      })}
+    </HStack>
+  )
+}
+
+export const RadioCard = (props: UseRadioProps & { children: ReactNode }) => {
+  const { getInputProps, getCheckboxProps } = useRadio(props)
+
+  const input = getInputProps()
+  const checkbox = getCheckboxProps()
+
+  return (
+    <Box as="label" flex="1">
+      <input {...input} />
+      <Flex
+        {...checkbox}
+        cursor="pointer"
+        borderWidth="2px"
+        borderRadius="md"
+        _checked={{
+          borderColor: 'blue.400',
+        }}
+        _hover={{
+          bgColor: useColorModeValue('gray.100', 'gray.700'),
+        }}
+        _active={{
+          bgColor: useColorModeValue('gray.200', 'gray.600'),
+        }}
+        px={5}
+        py={2}
+        transition="background-color 150ms, color 150ms, border 150ms"
+        justifyContent="center"
+      >
+        {props.children}
+      </Flex>
+    </Box>
+  )
+}
+
+const parseValue = (item: string | { value: string; label: ReactNode }) =>
+  typeof item === 'string' ? item : item.value
+
+const parseLabel = (item: string | { value: string; label: ReactNode }) =>
+  typeof item === 'string' ? item : item.label