feat: ButtonSwitch component

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "editor.formatOnSave": true,
-  "cSpell.words": ["faency"]
+  "cSpell.words": ["faency"],
+  "typescript.tsdk": "node_modules\\typescript\\lib"
 }

components/ButtonSwitch/ButtonSwitch.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ButtonSwitchContainer, ButtonSwitchItem } from './ButtonSwitch';
+import { useState } from 'react';
+
+export default {
+  title: 'Components/ButtonSwitch',
+  component: ButtonSwitchContainer,
+} as ComponentMeta<typeof ButtonSwitchContainer>;
+
+export const Basic: ComponentStory<any> = (args) => {
+  const [value, setValue] = useState('left');
+
+  return (
+    <ButtonSwitchContainer type="single" value={value} onValueChange={setValue}>
+      <ButtonSwitchItem value="left">Left</ButtonSwitchItem>
+      <ButtonSwitchItem value="right">Right</ButtonSwitchItem>
+    </ButtonSwitchContainer>
+  );
+};
+
+export const Multiple: ComponentStory<any> = (args) => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <ButtonSwitchContainer type="multiple" value={value} onValueChange={setValue}>
+      <ButtonSwitchItem value="option1">Option 1</ButtonSwitchItem>
+      <ButtonSwitchItem value="option2">Option 2</ButtonSwitchItem>
+      <ButtonSwitchItem value="option3">Option 3</ButtonSwitchItem>
+      <ButtonSwitchItem value="option4">Option 4</ButtonSwitchItem>
+    </ButtonSwitchContainer>
+  );
+};

components/ButtonSwitch/ButtonSwitch.themes.ts

@@ -0,0 +1,30 @@
+import { Property } from '@stitches/react/types/css';
+import { ColorInfo } from '../../utils/getPrimaryColorInfo';
+
+export namespace Theme {
+  type Colors = {
+    buttonSwitchContainerBg: Property.Color;
+    buttonSwitchActiveBg: Property.Color;
+    buttonSwitchOffBg: Property.Color;
+    buttonSwitchOffColor: Property.Color;
+    buttonSwitchActiveColor: Property.Color;
+  };
+
+  type Factory = (primaryColor: ColorInfo) => Colors;
+
+  export const getLight: Factory = () => ({
+    buttonSwitchContainerBg: '$02dp',
+    buttonSwitchActiveBg: '$primary',
+    buttonSwitchOffBg: 'transparent',
+    buttonSwitchOffColor: '$hiContrast',
+    buttonSwitchActiveColor: 'white',
+  });
+
+  export const getDark: Factory = () => ({
+    buttonSwitchContainerBg: '$02dp',
+    buttonSwitchActiveBg: '$primary',
+    buttonSwitchOffBg: 'transparent',
+    buttonSwitchOffColor: '$hiContrast',
+    buttonSwitchActiveColor: '$deepBlue2',
+  });
+}

components/ButtonSwitch/ButtonSwitch.tsx

@@ -0,0 +1,65 @@
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { styled } from '../../stitches.config';
+
+export const ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {
+  display: 'inline-flex',
+  bc: '$buttonSwitchContainerBg',
+  borderRadius: '$3',
+  p: '3px',
+  gap: '$1',
+});
+
+export const ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {
+  display: 'inline-flex',
+  bc: '$buttonSwitchOffBg',
+  c: '$buttonSwitchOffColor',
+  p: '$1',
+  width: '$10',
+  justifyContent: 'center',
+  fontWeight: 600,
+  border: 'none',
+  position: 'relative',
+
+  '&::before': {
+    boxSizing: 'border-box',
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    borderRadius: '$3',
+  },
+  '&::after': {
+    boxSizing: 'border-box',
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    borderRadius: '$3',
+  },
+
+  '&:focus-visible': {
+    borderRadius: '$3',
+    '&::before': {
+      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    },
+    '&::after': {
+      opacity: 0.15,
+    },
+  },
+
+  '@hover': {
+    '&:hover': {
+      cursor: 'pointer',
+      '&::before': {
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+      },
+      '&::after': {
+        opacity: 0.05,
+      },
+    },
+  },
+
+  '&[data-state=on]': {
+    bc: '$buttonSwitchActiveBg',
+    c: '$buttonSwitchActiveColor',
+    borderRadius: '$3',
+  },
+});

components/ButtonSwitch/index.ts

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