From 6bbe6544e0782c39a0f5989ef5768524c0e16882 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Fri, 16 May 2025 13:48:02 +0530
Subject: [PATCH 01/11] feat: add Switch component with customizable shapes and
 variants

---
 .../Components/Switch/Switch.component.tsx    | 113 ++++++++++++++++++
 src/Shared/Components/Switch/constants.ts     |  11 ++
 src/Shared/Components/Switch/index.ts         |   1 +
 src/Shared/Components/Switch/types.ts         | 106 ++++++++++++++++
 src/Shared/Components/Switch/utils.ts         |  60 ++++++++++
 src/Shared/Components/index.ts                |   1 +
 6 files changed, 292 insertions(+)
 create mode 100644 src/Shared/Components/Switch/Switch.component.tsx
 create mode 100644 src/Shared/Components/Switch/constants.ts
 create mode 100644 src/Shared/Components/Switch/index.ts
 create mode 100644 src/Shared/Components/Switch/types.ts
 create mode 100644 src/Shared/Components/Switch/utils.ts

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
new file mode 100644
index 000000000..e84f5e598
--- /dev/null
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -0,0 +1,113 @@
+import { AriaAttributes, HTMLAttributes } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+
+import { Tooltip } from '@Common/Tooltip'
+
+import { Icon } from '../Icon'
+import { SwitchProps } from './types'
+import { getSwitchContainerClass, getSwitchIconColor, getSwitchThumbClass, getSwitchTrackColor } from './utils'
+
+const Switch = ({
+    ariaLabel,
+    dataTestId,
+    isDisabled,
+    isLoading,
+    isChecked,
+    tooltipContent,
+    shape = 'rounded',
+    variant = 'positive',
+    iconColor,
+    iconName,
+    indeterminate = false,
+    handleChange,
+}: SwitchProps) => {
+    const getAriaChecked = (): AriaAttributes['aria-checked'] => {
+        if (!isChecked) {
+            return false
+        }
+
+        return indeterminate ? 'mixed' : true
+    }
+
+    const ariaChecked = getAriaChecked()
+
+    const showIndeterminateIcon = ariaChecked === 'mixed'
+    const role: HTMLAttributes<HTMLButtonElement>['role'] = showIndeterminateIcon ? 'checkbox' : 'switch'
+
+    const renderContent = () => {
+        if (isLoading) {
+            return <Icon name="ic-circle-loader" color={null} />
+        }
+
+        return (
+            <motion.span
+                className={`p-1 flex flex-grow-1 ${shape === 'rounded' ? 'br-12' : 'br-4'} ${isChecked ? 'right' : 'left'}`}
+                layout
+                animate={{
+                    backgroundColor: getSwitchTrackColor({ shape, variant, isChecked }),
+                }}
+                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+            >
+                <motion.span
+                    className={getSwitchThumbClass({ indeterminate, shape, isChecked })}
+                    layout
+                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                >
+                    <AnimatePresence>
+                        {showIndeterminateIcon ? (
+                            <motion.span
+                                key="dash"
+                                className="w-8 h-2 br-4 dc__no-shrink bg__white"
+                                initial={{ scale: 0, opacity: 0 }}
+                                animate={{ scale: 1, opacity: 1 }}
+                                exit={{ scale: 0, opacity: 0 }}
+                            />
+                        ) : (
+                            iconName && (
+                                <motion.span
+                                    key="icon"
+                                    className="flex icon-dim-12 dc__fill-available-space dc__no-shrink"
+                                    initial={{ scale: 0.8, opacity: 0 }}
+                                    animate={{ scale: 1, opacity: 1 }}
+                                    exit={{ scale: 0.8, opacity: 0 }}
+                                >
+                                    <Icon
+                                        name={iconName}
+                                        color={getSwitchIconColor({
+                                            isChecked,
+                                            iconColor,
+                                            variant,
+                                        })}
+                                        size={12}
+                                    />
+                                </motion.span>
+                            )
+                        )}
+                    </AnimatePresence>
+                </motion.span>
+            </motion.span>
+        )
+    }
+
+    // TODO: Can add hidden input for accessibility in case name [for forms] is given
+    return (
+        <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
+            <div className={`${getSwitchContainerClass({ shape })} flex dc__no-shrink`}>
+                <button
+                    type="button"
+                    role={role}
+                    aria-checked={ariaChecked}
+                    aria-label={isLoading ? 'Loading...' : ariaLabel}
+                    data-testid={dataTestId}
+                    disabled={isDisabled || isLoading}
+                    className={`p-0-imp h-100 flex flex-grow-1 dc__transparent ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
+                    onClick={handleChange}
+                >
+                    {renderContent()}
+                </button>
+            </div>
+        </Tooltip>
+    )
+}
+
+export default Switch
diff --git a/src/Shared/Components/Switch/constants.ts b/src/Shared/Components/Switch/constants.ts
new file mode 100644
index 000000000..e8fe803d2
--- /dev/null
+++ b/src/Shared/Components/Switch/constants.ts
@@ -0,0 +1,11 @@
+import { SwitchProps } from './types'
+
+export const SWITCH_VARIANTS: Record<SwitchProps['variant'], null> = {
+    theme: null,
+    positive: null,
+}
+
+export const SWITCH_SHAPES: Record<SwitchProps['shape'], null> = {
+    rounded: null,
+    square: null,
+}
diff --git a/src/Shared/Components/Switch/index.ts b/src/Shared/Components/Switch/index.ts
new file mode 100644
index 000000000..22aab781a
--- /dev/null
+++ b/src/Shared/Components/Switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.component'
diff --git a/src/Shared/Components/Switch/types.ts b/src/Shared/Components/Switch/types.ts
new file mode 100644
index 000000000..e150fa34f
--- /dev/null
+++ b/src/Shared/Components/Switch/types.ts
@@ -0,0 +1,106 @@
+import { IconBaseColorType } from '@Shared/types'
+
+import { IconName } from '../Icon'
+
+/**
+ * Represents the properties for configuring the shape and behavior of a switch component.
+ *
+ * - When `shape` is `rounded`:
+ *   - The switch will have a rounded appearance.
+ *   - `iconName`, `iconColor`, and `indeterminate` are not applicable.
+ *
+ * - When `shape` is `square`:
+ *   - The switch will have a square appearance.
+ *   - `iconName` specifies the name of the icon to display.
+ *   - `iconColor` allows customization of the icon's color in the active state.
+ *   - `indeterminate` indicates whether the switch is in an indeterminate state, typically used for checkboxes to represent a mixed state.
+ *     If `indeterminate` is true, the switch will not be fully checked or unchecked, and its role will change to `checkbox`.
+ */
+type SwitchShapeProps =
+    | {
+          /**
+           * The shape of the switch. Defaults to `rounded` if not specified.
+           */
+          shape?: 'rounded'
+
+          /**
+           * Icon name is not applicable for the `rounded` shape.
+           */
+          iconName?: never
+
+          /**
+           * Icon color is not applicable for the `rounded` shape.
+           */
+          iconColor?: never
+          indeterminate?: never
+      }
+    | {
+          /**
+           * The shape of the switch. Must be `square` to enable icon-related properties.
+           */
+          shape: 'square'
+
+          /**
+           * The name of the icon to display when the shape is `square`.
+           */
+          iconName: IconName
+
+          /**
+           * The color of the icon. If provided, this will override the default color in the active state.
+           */
+          iconColor?: IconBaseColorType
+          /**
+           * Indicates whether the switch is in an indeterminate state.
+           * This state is typically used for checkboxes to indicate a mixed state.
+           * If true, the switch will not be fully checked or unchecked. We will change the role to checkbox in this case since the indeterminate state is not applicable for the switch.
+           * This property is not applicable for the `rounded` shape.
+           * @default false
+           */
+          indeterminate?: boolean
+      }
+
+/**
+ * Represents the properties for the `Switch` component.
+ */
+export type SwitchProps = {
+    /**
+     * The ARIA label for the switch, used for accessibility purposes.
+     */
+    ariaLabel: string
+
+    /**
+     * A unique identifier for testing purposes.
+     */
+    dataTestId: string
+
+    /**
+     * The visual variant of the switch.
+     *
+     * @default `positive`
+     */
+    variant?: 'theme' | 'positive'
+
+    handleChange: () => void
+
+    /**
+     * Indicates whether the switch is disabled.
+     */
+    isDisabled?: boolean
+
+    /**
+     * Indicates whether the switch is in a loading state.
+     */
+    isLoading?: boolean
+
+    /**
+     * Indicates whether the switch is currently checked (on).
+     */
+    isChecked: boolean
+
+    /**
+     * Optional tooltip content to display when hovering over the switch.
+     *
+     * @default undefined
+     */
+    tooltipContent?: string
+} & SwitchShapeProps
diff --git a/src/Shared/Components/Switch/utils.ts b/src/Shared/Components/Switch/utils.ts
new file mode 100644
index 000000000..3f2759eb3
--- /dev/null
+++ b/src/Shared/Components/Switch/utils.ts
@@ -0,0 +1,60 @@
+import { IconBaseColorType } from '@Shared/types'
+
+import { SwitchProps } from './types'
+
+// On intro of size there will changes in almost all methods
+export const getSwitchContainerClass = ({ shape }: Required<Pick<SwitchProps, 'shape'>>): string => {
+    if (shape === 'rounded') {
+        return 'py-3 h-24 w-20'
+    }
+
+    return 'w-28 h-18'
+}
+
+export const getSwitchTrackColor = ({
+    shape,
+    variant,
+    isChecked,
+}: Required<Pick<SwitchProps, 'shape' | 'variant' | 'isChecked'>>): `var(--${IconBaseColorType})` => {
+    if (!isChecked) {
+        return 'var(--N200)'
+    }
+
+    if (shape === 'rounded') {
+        if (variant === 'theme') {
+            return 'var(--B500)'
+        }
+
+        return 'var(--G500)'
+    }
+
+    if (variant === 'theme') {
+        return 'var(--B300)'
+    }
+
+    return 'var(--G300)'
+}
+
+export const getSwitchThumbClass = ({
+    indeterminate,
+    shape,
+    isChecked,
+}: Pick<SwitchProps, 'indeterminate' | 'shape' | 'isChecked'>) => {
+    if (isChecked && indeterminate) {
+        return 'w-100 h-100 flex'
+    }
+
+    return `flex p-2 ${shape === 'rounded' ? 'dc__border-radius-50-per icon-dim-10' : 'br-3'} bg__white`
+}
+
+export const getSwitchIconColor = ({
+    iconColor,
+    isChecked,
+    variant,
+}: Pick<SwitchProps, 'iconColor' | 'isChecked' | 'variant'>): IconBaseColorType => {
+    if (!isChecked) {
+        return 'N200'
+    }
+
+    return iconColor || (variant === 'theme' ? 'B500' : 'G500')
+}
diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts
index 3747ac491..43b590a17 100644
--- a/src/Shared/Components/index.ts
+++ b/src/Shared/Components/index.ts
@@ -87,6 +87,7 @@ export * from './SelectPicker'
 export * from './ShowMoreText'
 export * from './SSOProviderIcon'
 export * from './StatusComponent'
+export * from './Switch'
 export * from './TabGroup'
 export * from './Table'
 export * from './TagsKeyValueTable'

From 0228618037443c0e00395044f32864950b02c981 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 19 May 2025 00:53:21 +0530
Subject: [PATCH 02/11] feat: enhance Switch component with size and loading
 state support

---
 .../Components/Switch/Switch.component.tsx    | 28 +++++-----
 src/Shared/Components/Switch/constants.ts     | 52 ++++++++++++++++++-
 src/Shared/Components/Switch/types.ts         | 29 +++++++----
 src/Shared/Components/Switch/utils.ts         | 42 ++++++---------
 4 files changed, 99 insertions(+), 52 deletions(-)

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index e84f5e598..c593ca819 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -2,8 +2,10 @@ import { AriaAttributes, HTMLAttributes } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 
 import { Tooltip } from '@Common/Tooltip'
+import { ComponentSizeType } from '@Shared/constants'
 
 import { Icon } from '../Icon'
+import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP, SQUARE_ICON_DIMENSION_MAP } from './constants'
 import { SwitchProps } from './types'
 import { getSwitchContainerClass, getSwitchIconColor, getSwitchThumbClass, getSwitchTrackColor } from './utils'
 
@@ -19,9 +21,10 @@ const Switch = ({
     iconColor,
     iconName,
     indeterminate = false,
-    handleChange,
+    size = ComponentSizeType.medium,
+    onChange,
 }: SwitchProps) => {
-    const getAriaChecked = (): AriaAttributes['aria-checked'] => {
+    const getAriaCheckedValue = (): AriaAttributes['aria-checked'] => {
         if (!isChecked) {
             return false
         }
@@ -29,19 +32,19 @@ const Switch = ({
         return indeterminate ? 'mixed' : true
     }
 
-    const ariaChecked = getAriaChecked()
+    const ariaCheckedValue = getAriaCheckedValue()
 
-    const showIndeterminateIcon = ariaChecked === 'mixed'
+    const showIndeterminateIcon = ariaCheckedValue === 'mixed'
     const role: HTMLAttributes<HTMLButtonElement>['role'] = showIndeterminateIcon ? 'checkbox' : 'switch'
 
     const renderContent = () => {
         if (isLoading) {
-            return <Icon name="ic-circle-loader" color={null} />
+            return <Icon name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} />
         }
 
         return (
             <motion.span
-                className={`p-1 flex flex-grow-1 ${shape === 'rounded' ? 'br-12' : 'br-4'} ${isChecked ? 'right' : 'left'}`}
+                className={`flex flex-grow-1 ${shape === 'rounded' ? 'p-2 br-12' : 'p-1 br-4'} ${isChecked ? 'right' : 'left'}`}
                 layout
                 animate={{
                     backgroundColor: getSwitchTrackColor({ shape, variant, isChecked }),
@@ -49,7 +52,7 @@ const Switch = ({
                 transition={{ type: 'spring', stiffness: 300, damping: 30 }}
             >
                 <motion.span
-                    className={getSwitchThumbClass({ indeterminate, shape, isChecked })}
+                    className={getSwitchThumbClass({ shape, size, showIndeterminateIcon })}
                     layout
                     transition={{ type: 'spring', stiffness: 500, damping: 35 }}
                 >
@@ -57,7 +60,7 @@ const Switch = ({
                         {showIndeterminateIcon ? (
                             <motion.span
                                 key="dash"
-                                className="w-8 h-2 br-4 dc__no-shrink bg__white"
+                                className={`${INDETERMINATE_ICON_WIDTH_MAP[size]} h-2 br-4 dc__no-shrink bg__white`}
                                 initial={{ scale: 0, opacity: 0 }}
                                 animate={{ scale: 1, opacity: 1 }}
                                 exit={{ scale: 0, opacity: 0 }}
@@ -66,7 +69,7 @@ const Switch = ({
                             iconName && (
                                 <motion.span
                                     key="icon"
-                                    className="flex icon-dim-12 dc__fill-available-space dc__no-shrink"
+                                    className={`${SQUARE_ICON_DIMENSION_MAP[size]} flex dc__fill-available-space dc__no-shrink`}
                                     initial={{ scale: 0.8, opacity: 0 }}
                                     animate={{ scale: 1, opacity: 1 }}
                                     exit={{ scale: 0.8, opacity: 0 }}
@@ -78,7 +81,6 @@ const Switch = ({
                                             iconColor,
                                             variant,
                                         })}
-                                        size={12}
                                     />
                                 </motion.span>
                             )
@@ -92,16 +94,16 @@ const Switch = ({
     // TODO: Can add hidden input for accessibility in case name [for forms] is given
     return (
         <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
-            <div className={`${getSwitchContainerClass({ shape })} flex dc__no-shrink`}>
+            <div className={`${getSwitchContainerClass({ shape, size })} flex dc__no-shrink py-2`}>
                 <button
                     type="button"
                     role={role}
-                    aria-checked={ariaChecked}
+                    aria-checked={ariaCheckedValue}
                     aria-label={isLoading ? 'Loading...' : ariaLabel}
                     data-testid={dataTestId}
                     disabled={isDisabled || isLoading}
                     className={`p-0-imp h-100 flex flex-grow-1 dc__transparent ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
-                    onClick={handleChange}
+                    onClick={onChange}
                 >
                     {renderContent()}
                 </button>
diff --git a/src/Shared/Components/Switch/constants.ts b/src/Shared/Components/Switch/constants.ts
index e8fe803d2..3bb9a5f8e 100644
--- a/src/Shared/Components/Switch/constants.ts
+++ b/src/Shared/Components/Switch/constants.ts
@@ -1,11 +1,59 @@
+import { ComponentSizeType } from '@Shared/constants'
+import { IconBaseColorType } from '@Shared/types'
+
 import { SwitchProps } from './types'
 
-export const SWITCH_VARIANTS: Record<SwitchProps['variant'], null> = {
+export const SWITCH_VARIANTS: Readonly<Record<SwitchProps['variant'], null>> = {
     theme: null,
     positive: null,
 }
 
-export const SWITCH_SHAPES: Record<SwitchProps['shape'], null> = {
+export const SWITCH_SHAPES: Readonly<Record<SwitchProps['shape'], null>> = {
     rounded: null,
     square: null,
 }
+
+export const ROUNDED_SWITCH_SIZE_MAP: Readonly<Record<SwitchProps['size'], string>> = {
+    [ComponentSizeType.medium]: 'w-32',
+    [ComponentSizeType.small]: 'w-24',
+}
+
+export const SQUARE_SWITCH_SIZE_MAP: typeof ROUNDED_SWITCH_SIZE_MAP = {
+    [ComponentSizeType.medium]: 'w-28',
+    [ComponentSizeType.small]: 'w-24',
+}
+
+export const SWITCH_HEIGHT_MAP: Readonly<Record<SwitchProps['size'], string>> = {
+    [ComponentSizeType.medium]: 'h-24',
+    [ComponentSizeType.small]: 'h-20',
+}
+
+export const LOADING_COLOR_MAP: Record<SwitchProps['variant'], IconBaseColorType> = {
+    theme: 'B500',
+    positive: 'G500',
+}
+
+export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<SwitchProps['variant'], `var(--${IconBaseColorType})`> = {
+    theme: 'var(--B500)',
+    positive: 'var(--G500)',
+}
+
+export const SQUARE_SWITCH_TRACK_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_COLOR_MAP = {
+    theme: 'var(--B300)',
+    positive: 'var(--G300)',
+}
+
+export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<SwitchProps['size'], string> = {
+    [ComponentSizeType.medium]: 'icon-dim-16',
+    [ComponentSizeType.small]: 'icon-dim-12',
+}
+
+export const INDETERMINATE_ICON_WIDTH_MAP: Record<SwitchProps['size'], string> = {
+    [ComponentSizeType.medium]: 'w-12',
+    [ComponentSizeType.small]: 'w-10',
+}
+
+export const SQUARE_ICON_DIMENSION_MAP: Record<SwitchProps['size'], string> = {
+    [ComponentSizeType.medium]: 'icon-dim-12',
+    [ComponentSizeType.small]: 'icon-dim-8',
+}
diff --git a/src/Shared/Components/Switch/types.ts b/src/Shared/Components/Switch/types.ts
index e150fa34f..d61b92c20 100644
--- a/src/Shared/Components/Switch/types.ts
+++ b/src/Shared/Components/Switch/types.ts
@@ -1,3 +1,4 @@
+import { ComponentSizeType } from '@Shared/constants'
 import { IconBaseColorType } from '@Shared/types'
 
 import { IconName } from '../Icon'
@@ -14,7 +15,7 @@ import { IconName } from '../Icon'
  *   - `iconName` specifies the name of the icon to display.
  *   - `iconColor` allows customization of the icon's color in the active state.
  *   - `indeterminate` indicates whether the switch is in an indeterminate state, typically used for checkboxes to represent a mixed state.
- *     If `indeterminate` is true, the switch will not be fully checked or unchecked, and its role will change to `checkbox`.
+ *     If `indeterminate` is true, the switch will not be fully checked or unchecked.
  */
 type SwitchShapeProps =
     | {
@@ -32,7 +33,14 @@ type SwitchShapeProps =
            * Icon color is not applicable for the `rounded` shape.
            */
           iconColor?: never
-          indeterminate?: never
+          /**
+           * Indicates whether the switch is in an indeterminate state.
+           * This state is typically used for checkboxes to indicate a mixed state.
+           * If true, the switch will not be fully checked or unchecked. Due this state alone we are keeping role as `checkbox` instead of `switch`.
+           * This property is not applicable for the `square` shape.
+           * @default false
+           */
+          indeterminate?: boolean
       }
     | {
           /**
@@ -49,14 +57,7 @@ type SwitchShapeProps =
            * The color of the icon. If provided, this will override the default color in the active state.
            */
           iconColor?: IconBaseColorType
-          /**
-           * Indicates whether the switch is in an indeterminate state.
-           * This state is typically used for checkboxes to indicate a mixed state.
-           * If true, the switch will not be fully checked or unchecked. We will change the role to checkbox in this case since the indeterminate state is not applicable for the switch.
-           * This property is not applicable for the `rounded` shape.
-           * @default false
-           */
-          indeterminate?: boolean
+          indeterminate?: never
       }
 
 /**
@@ -80,7 +81,13 @@ export type SwitchProps = {
      */
     variant?: 'theme' | 'positive'
 
-    handleChange: () => void
+    /**
+     * The size of the switch.
+     * @default `ComponentSizeType.medium`
+     */
+    size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.small>
+
+    onChange: () => void
 
     /**
      * Indicates whether the switch is disabled.
diff --git a/src/Shared/Components/Switch/utils.ts b/src/Shared/Components/Switch/utils.ts
index 3f2759eb3..2826859f1 100644
--- a/src/Shared/Components/Switch/utils.ts
+++ b/src/Shared/Components/Switch/utils.ts
@@ -1,15 +1,17 @@
 import { IconBaseColorType } from '@Shared/types'
 
+import {
+    ROUNDED_SWITCH_SIZE_MAP,
+    ROUNDED_SWITCH_THUMB_SIZE_MAP,
+    ROUNDED_SWITCH_TRACK_COLOR_MAP,
+    SQUARE_SWITCH_SIZE_MAP,
+    SQUARE_SWITCH_TRACK_COLOR_MAP,
+    SWITCH_HEIGHT_MAP,
+} from './constants'
 import { SwitchProps } from './types'
 
-// On intro of size there will changes in almost all methods
-export const getSwitchContainerClass = ({ shape }: Required<Pick<SwitchProps, 'shape'>>): string => {
-    if (shape === 'rounded') {
-        return 'py-3 h-24 w-20'
-    }
-
-    return 'w-28 h-18'
-}
+export const getSwitchContainerClass = ({ shape, size }: Required<Pick<SwitchProps, 'shape' | 'size'>>): string =>
+    `${SWITCH_HEIGHT_MAP[size]} ${shape === 'rounded' ? ROUNDED_SWITCH_SIZE_MAP[size] : SQUARE_SWITCH_SIZE_MAP[size]}`
 
 export const getSwitchTrackColor = ({
     shape,
@@ -20,31 +22,19 @@ export const getSwitchTrackColor = ({
         return 'var(--N200)'
     }
 
-    if (shape === 'rounded') {
-        if (variant === 'theme') {
-            return 'var(--B500)'
-        }
-
-        return 'var(--G500)'
-    }
-
-    if (variant === 'theme') {
-        return 'var(--B300)'
-    }
-
-    return 'var(--G300)'
+    return shape === 'rounded' ? ROUNDED_SWITCH_TRACK_COLOR_MAP[variant] : SQUARE_SWITCH_TRACK_COLOR_MAP[variant]
 }
 
 export const getSwitchThumbClass = ({
-    indeterminate,
     shape,
-    isChecked,
-}: Pick<SwitchProps, 'indeterminate' | 'shape' | 'isChecked'>) => {
-    if (isChecked && indeterminate) {
+    size,
+    showIndeterminateIcon,
+}: Pick<SwitchProps, 'shape' | 'size'> & { showIndeterminateIcon: boolean }) => {
+    if (showIndeterminateIcon) {
         return 'w-100 h-100 flex'
     }
 
-    return `flex p-2 ${shape === 'rounded' ? 'dc__border-radius-50-per icon-dim-10' : 'br-3'} bg__white`
+    return `flex p-3 ${shape === 'rounded' ? `dc__border-radius-50-per ${ROUNDED_SWITCH_THUMB_SIZE_MAP[size]}` : 'br-3'} bg__white`
 }
 
 export const getSwitchIconColor = ({

From cb4315d18bb21fe7920aff8ba02bbf9d84126f77 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 19 May 2025 01:11:26 +0530
Subject: [PATCH 03/11] feat: enhance Switch component with accessibility
 improvements and new padding constants

---
 .../Components/Switch/Switch.component.tsx    | 33 ++++++++++++++-----
 src/Shared/Components/Switch/constants.ts     |  6 ++--
 src/Shared/Components/Switch/types.ts         |  8 ++++-
 src/Shared/Components/Switch/utils.ts         |  3 +-
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index c593ca819..bbcc7f13e 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -1,11 +1,12 @@
-import { AriaAttributes, HTMLAttributes } from 'react'
+import { AriaAttributes, useRef } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
+import { getUniqueId } from '@Shared/Helpers'
 
 import { Icon } from '../Icon'
-import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP, SQUARE_ICON_DIMENSION_MAP } from './constants'
+import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP } from './constants'
 import { SwitchProps } from './types'
 import { getSwitchContainerClass, getSwitchIconColor, getSwitchThumbClass, getSwitchTrackColor } from './utils'
 
@@ -22,8 +23,11 @@ const Switch = ({
     iconName,
     indeterminate = false,
     size = ComponentSizeType.medium,
+    name,
     onChange,
 }: SwitchProps) => {
+    const inputId = useRef(getUniqueId())
+
     const getAriaCheckedValue = (): AriaAttributes['aria-checked'] => {
         if (!isChecked) {
             return false
@@ -35,7 +39,6 @@ const Switch = ({
     const ariaCheckedValue = getAriaCheckedValue()
 
     const showIndeterminateIcon = ariaCheckedValue === 'mixed'
-    const role: HTMLAttributes<HTMLButtonElement>['role'] = showIndeterminateIcon ? 'checkbox' : 'switch'
 
     const renderContent = () => {
         if (isLoading) {
@@ -69,7 +72,7 @@ const Switch = ({
                             iconName && (
                                 <motion.span
                                     key="icon"
-                                    className={`${SQUARE_ICON_DIMENSION_MAP[size]} flex dc__fill-available-space dc__no-shrink`}
+                                    className="icon-dim-12 flex dc__fill-available-space dc__no-shrink"
                                     initial={{ scale: 0.8, opacity: 0 }}
                                     animate={{ scale: 1, opacity: 1 }}
                                     exit={{ scale: 0.8, opacity: 0 }}
@@ -91,23 +94,37 @@ const Switch = ({
         )
     }
 
-    // TODO: Can add hidden input for accessibility in case name [for forms] is given
     return (
         <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
-            <div className={`${getSwitchContainerClass({ shape, size })} flex dc__no-shrink py-2`}>
+            <label
+                htmlFor={inputId.current}
+                className={`${getSwitchContainerClass({ shape, size })} flex dc__no-shrink py-2`}
+            >
+                <input
+                    type="checkbox"
+                    id={inputId.current}
+                    name={name}
+                    checked={isChecked}
+                    disabled={isDisabled}
+                    readOnly
+                    hidden
+                />
+
                 <button
                     type="button"
-                    role={role}
+                    role="checkbox"
                     aria-checked={ariaCheckedValue}
+                    aria-labelledby={inputId.current}
                     aria-label={isLoading ? 'Loading...' : ariaLabel}
                     data-testid={dataTestId}
                     disabled={isDisabled || isLoading}
+                    aria-disabled={isDisabled}
                     className={`p-0-imp h-100 flex flex-grow-1 dc__transparent ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
                     onClick={onChange}
                 >
                     {renderContent()}
                 </button>
-            </div>
+            </label>
         </Tooltip>
     )
 }
diff --git a/src/Shared/Components/Switch/constants.ts b/src/Shared/Components/Switch/constants.ts
index 3bb9a5f8e..b54ff33e2 100644
--- a/src/Shared/Components/Switch/constants.ts
+++ b/src/Shared/Components/Switch/constants.ts
@@ -53,7 +53,7 @@ export const INDETERMINATE_ICON_WIDTH_MAP: Record<SwitchProps['size'], string> =
     [ComponentSizeType.small]: 'w-10',
 }
 
-export const SQUARE_ICON_DIMENSION_MAP: Record<SwitchProps['size'], string> = {
-    [ComponentSizeType.medium]: 'icon-dim-12',
-    [ComponentSizeType.small]: 'icon-dim-8',
+export const SWITCH_THUMB_PADDING_MAP: Record<SwitchProps['size'], string> = {
+    [ComponentSizeType.medium]: 'p-3',
+    [ComponentSizeType.small]: 'p-1',
 }
diff --git a/src/Shared/Components/Switch/types.ts b/src/Shared/Components/Switch/types.ts
index d61b92c20..c8db63832 100644
--- a/src/Shared/Components/Switch/types.ts
+++ b/src/Shared/Components/Switch/types.ts
@@ -66,8 +66,14 @@ type SwitchShapeProps =
 export type SwitchProps = {
     /**
      * The ARIA label for the switch, used for accessibility purposes.
+     * Please provide this when there is no clear label for the switch.
      */
-    ariaLabel: string
+    ariaLabel?: string
+
+    /**
+     * Used in forms to identify the switch.
+     */
+    name: string
 
     /**
      * A unique identifier for testing purposes.
diff --git a/src/Shared/Components/Switch/utils.ts b/src/Shared/Components/Switch/utils.ts
index 2826859f1..db363134b 100644
--- a/src/Shared/Components/Switch/utils.ts
+++ b/src/Shared/Components/Switch/utils.ts
@@ -7,6 +7,7 @@ import {
     SQUARE_SWITCH_SIZE_MAP,
     SQUARE_SWITCH_TRACK_COLOR_MAP,
     SWITCH_HEIGHT_MAP,
+    SWITCH_THUMB_PADDING_MAP,
 } from './constants'
 import { SwitchProps } from './types'
 
@@ -34,7 +35,7 @@ export const getSwitchThumbClass = ({
         return 'w-100 h-100 flex'
     }
 
-    return `flex p-3 ${shape === 'rounded' ? `dc__border-radius-50-per ${ROUNDED_SWITCH_THUMB_SIZE_MAP[size]}` : 'br-3'} bg__white`
+    return `flex ${SWITCH_THUMB_PADDING_MAP[size]} ${shape === 'rounded' ? `dc__border-radius-50-per ${ROUNDED_SWITCH_THUMB_SIZE_MAP[size]}` : 'br-3'} bg__white`
 }
 
 export const getSwitchIconColor = ({

From daa9daafe777e6e1bf6927ae4c9647341bf7b4bc Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 19 May 2025 10:31:16 +0530
Subject: [PATCH 04/11] feat: update Switch component styles and improve index
 exports

---
 src/Shared/Components/Switch/Switch.component.tsx | 2 +-
 src/Shared/Components/Switch/index.ts             | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index bbcc7f13e..a1fcb1022 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -98,7 +98,7 @@ const Switch = ({
         <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
             <label
                 htmlFor={inputId.current}
-                className={`${getSwitchContainerClass({ shape, size })} flex dc__no-shrink py-2`}
+                className={`${getSwitchContainerClass({ shape, size })} flex dc__no-shrink py-2 m-0`}
             >
                 <input
                     type="checkbox"
diff --git a/src/Shared/Components/Switch/index.ts b/src/Shared/Components/Switch/index.ts
index 22aab781a..59377635f 100644
--- a/src/Shared/Components/Switch/index.ts
+++ b/src/Shared/Components/Switch/index.ts
@@ -1 +1,3 @@
+export { SWITCH_SHAPES, SWITCH_VARIANTS } from './constants'
 export { default as Switch } from './Switch.component'
+export type { SwitchProps } from './types'

From 652b7e14aa11bd135a9cf9ec6f3ac628fccac05b Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 19 May 2025 13:39:26 +0530
Subject: [PATCH 05/11] feat: make ariaLabel required for SwitchProps to
 enhance accessibility

---
 src/Shared/Components/Switch/types.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Shared/Components/Switch/types.ts b/src/Shared/Components/Switch/types.ts
index c8db63832..ea7167745 100644
--- a/src/Shared/Components/Switch/types.ts
+++ b/src/Shared/Components/Switch/types.ts
@@ -66,9 +66,8 @@ type SwitchShapeProps =
 export type SwitchProps = {
     /**
      * The ARIA label for the switch, used for accessibility purposes.
-     * Please provide this when there is no clear label for the switch.
      */
-    ariaLabel?: string
+    ariaLabel: string
 
     /**
      * Used in forms to identify the switch.

From 429787624230c7de320d7272e244b50d2b3e52c3 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Tue, 20 May 2025 21:11:53 +0530
Subject: [PATCH 06/11] feat: enhance Switch component with loading state
 handling and improved utility functions

---
 .../Components/Switch/Switch.component.tsx    | 50 +++++++++++--------
 src/Shared/Components/Switch/constants.ts     | 15 ++++--
 src/Shared/Components/Switch/utils.ts         | 29 ++++++++++-
 3 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index a1fcb1022..8882e1cea 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -8,7 +8,14 @@ import { getUniqueId } from '@Shared/Helpers'
 import { Icon } from '../Icon'
 import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP } from './constants'
 import { SwitchProps } from './types'
-import { getSwitchContainerClass, getSwitchIconColor, getSwitchThumbClass, getSwitchTrackColor } from './utils'
+import {
+    getSwitchContainerClass,
+    getSwitchIconColor,
+    getSwitchThumbClass,
+    getSwitchTrackColor,
+    getThumbPadding,
+    getThumbPosition,
+} from './utils'
 
 const Switch = ({
     ariaLabel,
@@ -40,24 +47,26 @@ const Switch = ({
 
     const showIndeterminateIcon = ariaCheckedValue === 'mixed'
 
-    const renderContent = () => {
-        if (isLoading) {
-            return <Icon name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} />
-        }
-
-        return (
-            <motion.span
-                className={`flex flex-grow-1 ${shape === 'rounded' ? 'p-2 br-12' : 'p-1 br-4'} ${isChecked ? 'right' : 'left'}`}
-                layout
-                animate={{
-                    backgroundColor: getSwitchTrackColor({ shape, variant, isChecked }),
-                }}
-                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-            >
+    const renderContent = () => (
+        <motion.span
+            className={`flex flex-grow-1 ${getThumbPadding({ shape, isLoading })} ${getThumbPosition({ isChecked, isLoading })}`}
+            layout
+            transition={{ ease: 'easeInOut', duration: 0.2 }}
+        >
+            {isLoading ? (
+                <motion.span
+                    transition={{ ease: 'easeInOut', duration: 0.2 }}
+                    layoutId="loader"
+                    className="flex-grow-1 h-100 dc__fill-available-space dc__no-shrink"
+                >
+                    <Icon key="progressing" name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} size={null} />
+                </motion.span>
+            ) : (
                 <motion.span
+                    layoutId="thumb"
                     className={getSwitchThumbClass({ shape, size, showIndeterminateIcon })}
                     layout
-                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                    transition={{ ease: 'easeInOut', duration: 0.2 }}
                 >
                     <AnimatePresence>
                         {showIndeterminateIcon ? (
@@ -84,15 +93,16 @@ const Switch = ({
                                             iconColor,
                                             variant,
                                         })}
+                                        size={null}
                                     />
                                 </motion.span>
                             )
                         )}
                     </AnimatePresence>
                 </motion.span>
-            </motion.span>
-        )
-    }
+            )}
+        </motion.span>
+    )
 
     return (
         <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
@@ -119,7 +129,7 @@ const Switch = ({
                     data-testid={dataTestId}
                     disabled={isDisabled || isLoading}
                     aria-disabled={isDisabled}
-                    className={`p-0-imp h-100 flex flex-grow-1 dc__transparent ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
+                    className={`p-0-imp h-100 flex flex-grow-1 dc__no-border ${shape === 'rounded' ? 'br-12' : 'br-4'} ${getSwitchTrackColor({ shape, variant, isChecked, isLoading })} ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
                     onClick={onChange}
                 >
                     {renderContent()}
diff --git a/src/Shared/Components/Switch/constants.ts b/src/Shared/Components/Switch/constants.ts
index b54ff33e2..f97fabe61 100644
--- a/src/Shared/Components/Switch/constants.ts
+++ b/src/Shared/Components/Switch/constants.ts
@@ -33,14 +33,14 @@ export const LOADING_COLOR_MAP: Record<SwitchProps['variant'], IconBaseColorType
     positive: 'G500',
 }
 
-export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<SwitchProps['variant'], `var(--${IconBaseColorType})`> = {
-    theme: 'var(--B500)',
-    positive: 'var(--G500)',
+export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<SwitchProps['variant'], string> = {
+    theme: 'bcb-5',
+    positive: 'bcg-5',
 }
 
 export const SQUARE_SWITCH_TRACK_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_COLOR_MAP = {
-    theme: 'var(--B300)',
-    positive: 'var(--G300)',
+    theme: 'bcb-3',
+    positive: 'bcg-3',
 }
 
 export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<SwitchProps['size'], string> = {
@@ -57,3 +57,8 @@ export const SWITCH_THUMB_PADDING_MAP: Record<SwitchProps['size'], string> = {
     [ComponentSizeType.medium]: 'p-3',
     [ComponentSizeType.small]: 'p-1',
 }
+
+export const THUMB_OUTER_PADDING_MAP: Record<SwitchProps['shape'], string> = {
+    rounded: 'p-2',
+    square: 'p-1',
+}
diff --git a/src/Shared/Components/Switch/utils.ts b/src/Shared/Components/Switch/utils.ts
index db363134b..afef4ee98 100644
--- a/src/Shared/Components/Switch/utils.ts
+++ b/src/Shared/Components/Switch/utils.ts
@@ -8,6 +8,7 @@ import {
     SQUARE_SWITCH_TRACK_COLOR_MAP,
     SWITCH_HEIGHT_MAP,
     SWITCH_THUMB_PADDING_MAP,
+    THUMB_OUTER_PADDING_MAP,
 } from './constants'
 import { SwitchProps } from './types'
 
@@ -18,9 +19,14 @@ export const getSwitchTrackColor = ({
     shape,
     variant,
     isChecked,
-}: Required<Pick<SwitchProps, 'shape' | 'variant' | 'isChecked'>>): `var(--${IconBaseColorType})` => {
+    isLoading,
+}: Required<Pick<SwitchProps, 'shape' | 'variant' | 'isChecked' | 'isLoading'>>): string => {
+    if (isLoading) {
+        return 'dc__transparent--unstyled'
+    }
+
     if (!isChecked) {
-        return 'var(--N200)'
+        return 'bcn-2'
     }
 
     return shape === 'rounded' ? ROUNDED_SWITCH_TRACK_COLOR_MAP[variant] : SQUARE_SWITCH_TRACK_COLOR_MAP[variant]
@@ -49,3 +55,22 @@ export const getSwitchIconColor = ({
 
     return iconColor || (variant === 'theme' ? 'B500' : 'G500')
 }
+
+export const getThumbPosition = ({
+    isLoading,
+    isChecked,
+}: Pick<SwitchProps, 'isLoading' | 'isChecked'>): 'left' | 'right' | 'center' => {
+    if (isLoading) {
+        return 'center'
+    }
+
+    return isChecked ? 'right' : 'left'
+}
+
+export const getThumbPadding = ({ shape, isLoading }: Pick<SwitchProps, 'shape' | 'isLoading'>): string => {
+    if (isLoading) {
+        return ''
+    }
+
+    return THUMB_OUTER_PADDING_MAP[shape]
+}

From 5ff39fcf8df008a9cf4706bbe1a8a094df5dc6ca Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Wed, 21 May 2025 10:28:18 +0530
Subject: [PATCH 07/11] chore: update version from 1.13.0-pre-6 to
 1.13.0-beta-8 in package.json and package-lock.json

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ba478ef3..8354898a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.13.0-pre-6",
+    "version": "1.13.0-beta-8",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.13.0-pre-6",
+            "version": "1.13.0-beta-8",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 4227d5d2a..f763c0442 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.13.0-pre-6",
+    "version": "1.13.0-beta-8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

From 95faa766aba96800807dcdb6e3de580a14d6733e Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Wed, 21 May 2025 16:29:15 +0530
Subject: [PATCH 08/11] refactor: rename SwitchProps to DTSwitchProps for
 consistency across Switch component

---
 .../Components/Switch/Switch.component.tsx    |  4 ++--
 src/Shared/Components/Switch/constants.ts     | 22 +++++++++----------
 src/Shared/Components/Switch/index.ts         |  4 ++--
 src/Shared/Components/Switch/types.ts         |  2 +-
 src/Shared/Components/Switch/utils.ts         | 14 ++++++------
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index 8882e1cea..3aa635887 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -7,7 +7,7 @@ import { getUniqueId } from '@Shared/Helpers'
 
 import { Icon } from '../Icon'
 import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP } from './constants'
-import { SwitchProps } from './types'
+import { DTSwitchProps } from './types'
 import {
     getSwitchContainerClass,
     getSwitchIconColor,
@@ -32,7 +32,7 @@ const Switch = ({
     size = ComponentSizeType.medium,
     name,
     onChange,
-}: SwitchProps) => {
+}: DTSwitchProps) => {
     const inputId = useRef(getUniqueId())
 
     const getAriaCheckedValue = (): AriaAttributes['aria-checked'] => {
diff --git a/src/Shared/Components/Switch/constants.ts b/src/Shared/Components/Switch/constants.ts
index f97fabe61..2e808ed81 100644
--- a/src/Shared/Components/Switch/constants.ts
+++ b/src/Shared/Components/Switch/constants.ts
@@ -1,19 +1,19 @@
 import { ComponentSizeType } from '@Shared/constants'
 import { IconBaseColorType } from '@Shared/types'
 
-import { SwitchProps } from './types'
+import { DTSwitchProps } from './types'
 
-export const SWITCH_VARIANTS: Readonly<Record<SwitchProps['variant'], null>> = {
+export const SWITCH_VARIANTS: Readonly<Record<DTSwitchProps['variant'], null>> = {
     theme: null,
     positive: null,
 }
 
-export const SWITCH_SHAPES: Readonly<Record<SwitchProps['shape'], null>> = {
+export const SWITCH_SHAPES: Readonly<Record<DTSwitchProps['shape'], null>> = {
     rounded: null,
     square: null,
 }
 
-export const ROUNDED_SWITCH_SIZE_MAP: Readonly<Record<SwitchProps['size'], string>> = {
+export const ROUNDED_SWITCH_SIZE_MAP: Readonly<Record<DTSwitchProps['size'], string>> = {
     [ComponentSizeType.medium]: 'w-32',
     [ComponentSizeType.small]: 'w-24',
 }
@@ -23,17 +23,17 @@ export const SQUARE_SWITCH_SIZE_MAP: typeof ROUNDED_SWITCH_SIZE_MAP = {
     [ComponentSizeType.small]: 'w-24',
 }
 
-export const SWITCH_HEIGHT_MAP: Readonly<Record<SwitchProps['size'], string>> = {
+export const SWITCH_HEIGHT_MAP: Readonly<Record<DTSwitchProps['size'], string>> = {
     [ComponentSizeType.medium]: 'h-24',
     [ComponentSizeType.small]: 'h-20',
 }
 
-export const LOADING_COLOR_MAP: Record<SwitchProps['variant'], IconBaseColorType> = {
+export const LOADING_COLOR_MAP: Record<DTSwitchProps['variant'], IconBaseColorType> = {
     theme: 'B500',
     positive: 'G500',
 }
 
-export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<SwitchProps['variant'], string> = {
+export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<DTSwitchProps['variant'], string> = {
     theme: 'bcb-5',
     positive: 'bcg-5',
 }
@@ -43,22 +43,22 @@ export const SQUARE_SWITCH_TRACK_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_COLOR_MA
     positive: 'bcg-3',
 }
 
-export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<SwitchProps['size'], string> = {
+export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<DTSwitchProps['size'], string> = {
     [ComponentSizeType.medium]: 'icon-dim-16',
     [ComponentSizeType.small]: 'icon-dim-12',
 }
 
-export const INDETERMINATE_ICON_WIDTH_MAP: Record<SwitchProps['size'], string> = {
+export const INDETERMINATE_ICON_WIDTH_MAP: Record<DTSwitchProps['size'], string> = {
     [ComponentSizeType.medium]: 'w-12',
     [ComponentSizeType.small]: 'w-10',
 }
 
-export const SWITCH_THUMB_PADDING_MAP: Record<SwitchProps['size'], string> = {
+export const SWITCH_THUMB_PADDING_MAP: Record<DTSwitchProps['size'], string> = {
     [ComponentSizeType.medium]: 'p-3',
     [ComponentSizeType.small]: 'p-1',
 }
 
-export const THUMB_OUTER_PADDING_MAP: Record<SwitchProps['shape'], string> = {
+export const THUMB_OUTER_PADDING_MAP: Record<DTSwitchProps['shape'], string> = {
     rounded: 'p-2',
     square: 'p-1',
 }
diff --git a/src/Shared/Components/Switch/index.ts b/src/Shared/Components/Switch/index.ts
index 59377635f..e4732a3e0 100644
--- a/src/Shared/Components/Switch/index.ts
+++ b/src/Shared/Components/Switch/index.ts
@@ -1,3 +1,3 @@
 export { SWITCH_SHAPES, SWITCH_VARIANTS } from './constants'
-export { default as Switch } from './Switch.component'
-export type { SwitchProps } from './types'
+export { default as DTSwitch } from './Switch.component'
+export type { DTSwitchProps } from './types'
diff --git a/src/Shared/Components/Switch/types.ts b/src/Shared/Components/Switch/types.ts
index ea7167745..32f3d58e5 100644
--- a/src/Shared/Components/Switch/types.ts
+++ b/src/Shared/Components/Switch/types.ts
@@ -63,7 +63,7 @@ type SwitchShapeProps =
 /**
  * Represents the properties for the `Switch` component.
  */
-export type SwitchProps = {
+export type DTSwitchProps = {
     /**
      * The ARIA label for the switch, used for accessibility purposes.
      */
diff --git a/src/Shared/Components/Switch/utils.ts b/src/Shared/Components/Switch/utils.ts
index afef4ee98..16113290b 100644
--- a/src/Shared/Components/Switch/utils.ts
+++ b/src/Shared/Components/Switch/utils.ts
@@ -10,9 +10,9 @@ import {
     SWITCH_THUMB_PADDING_MAP,
     THUMB_OUTER_PADDING_MAP,
 } from './constants'
-import { SwitchProps } from './types'
+import { DTSwitchProps } from './types'
 
-export const getSwitchContainerClass = ({ shape, size }: Required<Pick<SwitchProps, 'shape' | 'size'>>): string =>
+export const getSwitchContainerClass = ({ shape, size }: Required<Pick<DTSwitchProps, 'shape' | 'size'>>): string =>
     `${SWITCH_HEIGHT_MAP[size]} ${shape === 'rounded' ? ROUNDED_SWITCH_SIZE_MAP[size] : SQUARE_SWITCH_SIZE_MAP[size]}`
 
 export const getSwitchTrackColor = ({
@@ -20,7 +20,7 @@ export const getSwitchTrackColor = ({
     variant,
     isChecked,
     isLoading,
-}: Required<Pick<SwitchProps, 'shape' | 'variant' | 'isChecked' | 'isLoading'>>): string => {
+}: Required<Pick<DTSwitchProps, 'shape' | 'variant' | 'isChecked' | 'isLoading'>>): string => {
     if (isLoading) {
         return 'dc__transparent--unstyled'
     }
@@ -36,7 +36,7 @@ export const getSwitchThumbClass = ({
     shape,
     size,
     showIndeterminateIcon,
-}: Pick<SwitchProps, 'shape' | 'size'> & { showIndeterminateIcon: boolean }) => {
+}: Pick<DTSwitchProps, 'shape' | 'size'> & { showIndeterminateIcon: boolean }) => {
     if (showIndeterminateIcon) {
         return 'w-100 h-100 flex'
     }
@@ -48,7 +48,7 @@ export const getSwitchIconColor = ({
     iconColor,
     isChecked,
     variant,
-}: Pick<SwitchProps, 'iconColor' | 'isChecked' | 'variant'>): IconBaseColorType => {
+}: Pick<DTSwitchProps, 'iconColor' | 'isChecked' | 'variant'>): IconBaseColorType => {
     if (!isChecked) {
         return 'N200'
     }
@@ -59,7 +59,7 @@ export const getSwitchIconColor = ({
 export const getThumbPosition = ({
     isLoading,
     isChecked,
-}: Pick<SwitchProps, 'isLoading' | 'isChecked'>): 'left' | 'right' | 'center' => {
+}: Pick<DTSwitchProps, 'isLoading' | 'isChecked'>): 'left' | 'right' | 'center' => {
     if (isLoading) {
         return 'center'
     }
@@ -67,7 +67,7 @@ export const getThumbPosition = ({
     return isChecked ? 'right' : 'left'
 }
 
-export const getThumbPadding = ({ shape, isLoading }: Pick<SwitchProps, 'shape' | 'isLoading'>): string => {
+export const getThumbPadding = ({ shape, isLoading }: Pick<DTSwitchProps, 'shape' | 'isLoading'>): string => {
     if (isLoading) {
         return ''
     }

From b263a1d32c8de6405fa280f6bda0e48bdcb5e7c0 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Sun, 25 May 2025 18:36:46 +0530
Subject: [PATCH 09/11] feat: add hover color support for Switch component and
 refactor styles

---
 .../Components/Switch/Switch.component.tsx     | 17 ++++++++++++++---
 src/Shared/Components/Switch/constants.ts      | 10 ++++++++++
 src/Shared/Components/Switch/switch.scss       |  9 +++++++++
 src/Shared/Components/Switch/utils.ts          | 18 ++++++++++++++++++
 4 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/Shared/Components/Switch/switch.scss

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index 3aa635887..161f530cd 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -13,10 +13,13 @@ import {
     getSwitchIconColor,
     getSwitchThumbClass,
     getSwitchTrackColor,
+    getSwitchTrackHoverColor,
     getThumbPadding,
     getThumbPosition,
 } from './utils'
 
+import './switch.scss'
+
 const Switch = ({
     ariaLabel,
     dataTestId,
@@ -56,14 +59,14 @@ const Switch = ({
             {isLoading ? (
                 <motion.span
                     transition={{ ease: 'easeInOut', duration: 0.2 }}
-                    layoutId="loader"
+                    layoutId={`${name}-loader`}
                     className="flex-grow-1 h-100 dc__fill-available-space dc__no-shrink"
                 >
                     <Icon key="progressing" name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} size={null} />
                 </motion.span>
             ) : (
                 <motion.span
-                    layoutId="thumb"
+                    layoutId={`${name}-thumb`}
                     className={getSwitchThumbClass({ shape, size, showIndeterminateIcon })}
                     layout
                     transition={{ ease: 'easeInOut', duration: 0.2 }}
@@ -129,8 +132,16 @@ const Switch = ({
                     data-testid={dataTestId}
                     disabled={isDisabled || isLoading}
                     aria-disabled={isDisabled}
-                    className={`p-0-imp h-100 flex flex-grow-1 dc__no-border ${shape === 'rounded' ? 'br-12' : 'br-4'} ${getSwitchTrackColor({ shape, variant, isChecked, isLoading })} ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
+                    className={`p-0-imp h-100 flex flex-grow-1 dc__no-border dt-switch__track ${shape === 'rounded' ? 'br-12' : 'br-4'} ${getSwitchTrackColor({ shape, variant, isChecked, isLoading })} ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
                     onClick={onChange}
+                    style={{
+                        // Adding hover styles directly to the button
+                        ['--switch-track-hover-color' as string]: getSwitchTrackHoverColor({
+                            shape,
+                            variant,
+                            isChecked,
+                        }),
+                    }}
                 >
                     {renderContent()}
                 </button>
diff --git a/src/Shared/Components/Switch/constants.ts b/src/Shared/Components/Switch/constants.ts
index 2e808ed81..28c8ef79f 100644
--- a/src/Shared/Components/Switch/constants.ts
+++ b/src/Shared/Components/Switch/constants.ts
@@ -38,11 +38,21 @@ export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<DTSwitchProps['variant'], st
     positive: 'bcg-5',
 }
 
+export const ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP: Record<DTSwitchProps['variant'], `var(--${IconBaseColorType})`> = {
+    theme: 'var(--B600)',
+    positive: 'var(--G600)',
+}
+
 export const SQUARE_SWITCH_TRACK_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_COLOR_MAP = {
     theme: 'bcb-3',
     positive: 'bcg-3',
 }
 
+export const SQUARE_SWITCH_TRACK_HOVER_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP = {
+    theme: 'var(--B400)',
+    positive: 'var(--G400)',
+}
+
 export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<DTSwitchProps['size'], string> = {
     [ComponentSizeType.medium]: 'icon-dim-16',
     [ComponentSizeType.small]: 'icon-dim-12',
diff --git a/src/Shared/Components/Switch/switch.scss b/src/Shared/Components/Switch/switch.scss
new file mode 100644
index 000000000..522b011c0
--- /dev/null
+++ b/src/Shared/Components/Switch/switch.scss
@@ -0,0 +1,9 @@
+.dt-switch {
+    &__track {
+        --switch-track-hover-color: 'transparent';
+        
+        &:hover {
+            background-color: var(--switch-track-hover-color);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Shared/Components/Switch/utils.ts b/src/Shared/Components/Switch/utils.ts
index 16113290b..2dd6cf73a 100644
--- a/src/Shared/Components/Switch/utils.ts
+++ b/src/Shared/Components/Switch/utils.ts
@@ -4,8 +4,10 @@ import {
     ROUNDED_SWITCH_SIZE_MAP,
     ROUNDED_SWITCH_THUMB_SIZE_MAP,
     ROUNDED_SWITCH_TRACK_COLOR_MAP,
+    ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP,
     SQUARE_SWITCH_SIZE_MAP,
     SQUARE_SWITCH_TRACK_COLOR_MAP,
+    SQUARE_SWITCH_TRACK_HOVER_COLOR_MAP,
     SWITCH_HEIGHT_MAP,
     SWITCH_THUMB_PADDING_MAP,
     THUMB_OUTER_PADDING_MAP,
@@ -32,6 +34,22 @@ export const getSwitchTrackColor = ({
     return shape === 'rounded' ? ROUNDED_SWITCH_TRACK_COLOR_MAP[variant] : SQUARE_SWITCH_TRACK_COLOR_MAP[variant]
 }
 
+export const getSwitchTrackHoverColor = ({
+    shape,
+    variant,
+    isChecked,
+}: Required<
+    Pick<DTSwitchProps, 'shape' | 'variant' | 'isChecked'>
+>): (typeof ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP)[DTSwitchProps['variant']] => {
+    if (!isChecked) {
+        return 'var(--N300)'
+    }
+
+    return shape === 'rounded'
+        ? ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP[variant]
+        : SQUARE_SWITCH_TRACK_HOVER_COLOR_MAP[variant]
+}
+
 export const getSwitchThumbClass = ({
     shape,
     size,

From b8f14c0fd228c9653fbd6d806d931d7fe895012b Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 26 May 2025 10:55:40 +0530
Subject: [PATCH 10/11] fix: remove unnecessary keys from loading and icon
 spans in Switch component

---
 src/Shared/Components/Switch/Switch.component.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index 161f530cd..b006d743c 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -62,7 +62,7 @@ const Switch = ({
                     layoutId={`${name}-loader`}
                     className="flex-grow-1 h-100 dc__fill-available-space dc__no-shrink"
                 >
-                    <Icon key="progressing" name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} size={null} />
+                    <Icon name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} size={null} />
                 </motion.span>
             ) : (
                 <motion.span
@@ -74,7 +74,6 @@ const Switch = ({
                     <AnimatePresence>
                         {showIndeterminateIcon ? (
                             <motion.span
-                                key="dash"
                                 className={`${INDETERMINATE_ICON_WIDTH_MAP[size]} h-2 br-4 dc__no-shrink bg__white`}
                                 initial={{ scale: 0, opacity: 0 }}
                                 animate={{ scale: 1, opacity: 1 }}
@@ -83,7 +82,6 @@ const Switch = ({
                         ) : (
                             iconName && (
                                 <motion.span
-                                    key="icon"
                                     className="icon-dim-12 flex dc__fill-available-space dc__no-shrink"
                                     initial={{ scale: 0.8, opacity: 0 }}
                                     animate={{ scale: 1, opacity: 1 }}

From 306bd3cbb526e60d689c0c70124e1fd72b090069 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 26 May 2025 11:33:51 +0530
Subject: [PATCH 11/11] refactor: remove unused SWITCH_VARIANTS and
 SWITCH_SHAPES constants from Switch component

---
 src/Shared/Components/Switch/constants.ts | 10 ----------
 src/Shared/Components/Switch/index.ts     |  1 -
 src/Shared/Components/Switch/types.ts     |  4 ++++
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/Shared/Components/Switch/constants.ts b/src/Shared/Components/Switch/constants.ts
index 28c8ef79f..6d1c97cbc 100644
--- a/src/Shared/Components/Switch/constants.ts
+++ b/src/Shared/Components/Switch/constants.ts
@@ -3,16 +3,6 @@ import { IconBaseColorType } from '@Shared/types'
 
 import { DTSwitchProps } from './types'
 
-export const SWITCH_VARIANTS: Readonly<Record<DTSwitchProps['variant'], null>> = {
-    theme: null,
-    positive: null,
-}
-
-export const SWITCH_SHAPES: Readonly<Record<DTSwitchProps['shape'], null>> = {
-    rounded: null,
-    square: null,
-}
-
 export const ROUNDED_SWITCH_SIZE_MAP: Readonly<Record<DTSwitchProps['size'], string>> = {
     [ComponentSizeType.medium]: 'w-32',
     [ComponentSizeType.small]: 'w-24',
diff --git a/src/Shared/Components/Switch/index.ts b/src/Shared/Components/Switch/index.ts
index e4732a3e0..a5ff57e39 100644
--- a/src/Shared/Components/Switch/index.ts
+++ b/src/Shared/Components/Switch/index.ts
@@ -1,3 +1,2 @@
-export { SWITCH_SHAPES, SWITCH_VARIANTS } from './constants'
 export { default as DTSwitch } from './Switch.component'
 export type { DTSwitchProps } from './types'
diff --git a/src/Shared/Components/Switch/types.ts b/src/Shared/Components/Switch/types.ts
index 32f3d58e5..2af63d037 100644
--- a/src/Shared/Components/Switch/types.ts
+++ b/src/Shared/Components/Switch/types.ts
@@ -92,6 +92,10 @@ export type DTSwitchProps = {
      */
     size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.small>
 
+    /**
+     * Callback function that is called when the switch state changes.
+     * This function should handle the logic for toggling the switch.
+     */
     onChange: () => void
 
     /**