feat: rounded property to toggle

packages/component-library/src/SingleToggleGroup/index.module.scss

@@ -20,7 +20,13 @@
       transition-duration: 100ms;
       transition-timing-function: linear;
     }
-
+    &[data-rounded] {
+      border-radius: theme.border-radius("full");
+      .bubble {
+        border-radius: theme.border-radius("full");
+      }
+    }
+    
     &[data-selected] {
       color: theme.color("button", "solid", "foreground");
       pointer-events: none;
@@ -38,6 +44,7 @@
           );
         }
 
+
         &[data-pressed] .bubble {
           background-color: theme.color(
             "button",

packages/component-library/src/SingleToggleGroup/index.stories.tsx

@@ -5,6 +5,12 @@ import { SingleToggleGroup as SingleToggleGroupComponent } from "./index.jsx";
 const meta = {
   component: SingleToggleGroupComponent,
   argTypes: {
+    rounded: {
+      control: "boolean",
+      table: {
+        category: "Appearance",
+      },
+    },
     items: {
       table: {
         disable: true,
@@ -21,6 +27,7 @@ export default meta;
 
 export const SingleToggleGroup = {
   args: {
+    rounded: false,
     items: [
       { id: "foo", children: "Foo" },
       { id: "bar", children: "Bar" },

packages/component-library/src/SingleToggleGroup/index.tsx

@@ -14,7 +14,9 @@ type OwnProps = {
   selectedKey?: Key | undefined;
   onSelectionChange?: (newValue: Key) => void;
   items: ComponentProps<typeof ToggleButton>[];
+  rounded?: boolean | undefined;
 };
+
 type Props = Omit<
   ComponentProps<typeof ToggleButtonGroup>,
   keyof OwnProps | "selectionMode" | "selectedKeys"
@@ -26,6 +28,7 @@ export const SingleToggleGroup = ({
   onSelectionChange,
   className,
   items,
+  rounded = false,
   ...props
 }: Props) => {
   const id = useId();
@@ -63,6 +66,7 @@ export const SingleToggleGroup = ({
           )}
           data-size="sm"
           data-variant="ghost"
+          data-rounded={rounded ? true : undefined}
           {...toggleButton}
         >
           {(args) => (