feat: enhance SegmentedControl by wrapping item labels in Text component for improved styling

Author: nicosammito

src/components/segmented-control/SegmentedControl.stories.tsx

@@ -1,6 +1,7 @@
 import {Meta} from "@storybook/react-vite";
 import {SegmentedControl, SegmentedControlItem} from "./SegmentedControl";
 import React from "react";
+import {Text} from "../text/Text";
 
 export default {
     title: "Segmented Control",
@@ -9,13 +10,13 @@ export default {
 export const SegmentedControlExample = () => {
     return <SegmentedControl defaultValue={"codezero"} type={"single"}>
         <SegmentedControlItem value={"codezero"}>
-            CodeZero
+            <Text>CodeZero</Text>
         </SegmentedControlItem>
         <SegmentedControlItem value={"github"}>
-            Github
+            <Text>Github</Text>
         </SegmentedControlItem>
         <SegmentedControlItem value={"apple"}>
-            Apple
+            <Text>Apple</Text>
         </SegmentedControlItem>
     </SegmentedControl>
 }

src/components/segmented-control/SegmentedControl.style.scss

@@ -22,13 +22,12 @@
     & {
       @include box.box();
       border-radius: variables.$borderRadius - variables.$xxs;
-      @include helpers.fontStyle();
-      font-size: variables.$sm;
-      box-shadow: none;
+      border: none;
     }
 
     &[data-state="off"] {
       background: transparent;
+      opacity: .6666666666;
     }
 
   }