First pass at adding Canon switch

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/package.json

@@ -44,7 +44,8 @@
     "@base-ui-components/react": "1.0.0-alpha.7",
     "@remixicon/react": "^4.6.0",
     "@tanstack/react-table": "^8.21.3",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "react-aria-components": "^1.10.1"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

packages/canon/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Switch } from './Switch';
+
+const meta = {
+  title: 'Components/Switch',
+  component: Switch,
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Switch',
+  },
+};

packages/canon/src/components/Switch/Switch.styles.css

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.canon-Switch {
+  display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
+  align-items: center;
+  gap: var(--canon-space-3);
+  font-size: var(--canon-font-size-3);
+  color: var(--canon-fg-primary);
+  cursor: pointer;
+
+  &[data-pressed] .canon-SwitchIndicator {
+    &:before {
+      background: var(--canon-fg-solid);
+    }
+  }
+
+  &[data-selected] {
+    .canon-SwitchIndicator {
+      background: var(--canon-gray-3);
+
+      &:before {
+        background: var(--canon-fg-solid);
+        transform: translateX(100%);
+      }
+    }
+
+    &[data-pressed] {
+      .indicator {
+        background: var(--canon-gray-3);
+      }
+    }
+  }
+
+  &[data-focus-visible] .canon-SwitchIndicator {
+    outline: 2px solid;
+    outline-offset: 2px;
+  }
+}
+
+.canon-SwitchIndicator {
+  width: 2rem;
+  height: 1.143rem;
+  border: 2px;
+  background: var(--canon-gray-3);
+  border-radius: 1.143rem;
+  transition: all 200ms;
+
+  &:before {
+    content: '';
+    display: block;
+    margin: 0.143rem;
+    width: 0.857rem;
+    height: 0.857rem;
+    background: var(--canon-fg-solid);
+    border-radius: 16px;
+    transition: all 200ms;
+  }
+}

packages/canon/src/components/Switch/Switch.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { forwardRef } from 'react';
+import { Switch as AriaSwitch } from 'react-aria-components';
+import type { SwitchProps } from './types';
+
+export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
+  ({ label, ...props }, ref) => {
+    return (
+      <AriaSwitch className="canon-Switch" ref={ref} {...props}>
+        <div className="canon-SwitchIndicator" />
+        {label}
+      </AriaSwitch>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';

packages/canon/src/components/Switch/index.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Switch } from './Switch';

packages/canon/src/components/Switch/types.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { SwitchProps as AriaSwitchProps } from 'react-aria-components';
+
+export interface SwitchProps extends AriaSwitchProps {
+  label?: string;
+}

packages/canon/src/css/components.css

@@ -40,3 +40,4 @@
 @import '../components/Tooltip/Tooltip.styles.css';
 @import '../components/ScrollArea/ScrollArea.styles.css';
 @import '../components/Select/Select.styles.css';
+@import '../components/Switch/Switch.styles.css';

packages/canon/src/index.ts

@@ -47,6 +47,7 @@ export * from './components/Menu';
 export * from './components/ScrollArea';
 export * from './components/Link';
 export * from './components/Select';
+export * from './components/Switch';
 
 // Types
 export * from './types';