add SfSwitch

Author: gioboa

packages/storefront-ui/src/components/SfSwitch/SfSwitch.tsx

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { SfSwitchProps } from './types';
+
+export const SfSwitch = component$<SfSwitchProps>(({ ref, invalid, class: _class, ...attributes }) => (
+  <input
+    {...(ref ? { ref } : {})}
+    class={`appearance-none h-5 min-w-[36px] bg-transparent border-2 border-gray-500 rounded-full relative ease-in-out duration-300 
+          hover:border-primary-800 hover:before:checked:bg-white checked:before:left-1/2 checked:before:ml-0 checked:before:mr-0.5 disabled:before:bg-gray-500/50 
+          hover:before:bg-primary-800 active:border-primary-800 active:before:bg-primary-800 checked:bg-none checked:bg-primary-700 checked:border-primary-700 
+          checked:before:bg-white hover:checked:bg-primary-800 hover:checked:border-primary-800 disabled:border-gray-500/50 checked:disabled:before:bg-white 
+          checked:disabled:bg-gray-500/50 checked:disabled:border-0 before:transition-all  before:w-3.5 before:h-3.5 before:bg-gray-500 before:absolute before:top-0 
+          before:bottom-0 before:my-auto before:rounded-full before:left-0 before:ml-0.5 before:ease-in-out before:duration-300 cursor-pointer disabled:cursor-not-allowed 
+          focus-visible:outline focus-visible:outline-offset 
+            ${
+              invalid
+                ? 'border-negative-700 hover:border-negative-800 active:border-negative-900 before:bg-negative-900'
+                : ''
+            }
+            ${_class}`}
+    type="checkbox"
+    role="switch"
+    {...attributes}
+    data-testid="switch"
+  />
+));

packages/storefront-ui/src/components/SfSwitch/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export {  SfSwitch } from './SfSwitch';

packages/storefront-ui/src/components/SfSwitch/types.ts

@@ -0,0 +1,13 @@
+import {
+  PropFunction,
+  QwikChangeEvent,
+  QwikIntrinsicElements,
+  Signal,
+} from '@builder.io/qwik';
+
+export type SfSwitchProps = Omit<QwikIntrinsicElements['input'], 'children'> & {
+  ref?: Signal<Element | undefined>;
+  class?: string;
+  invalid?: boolean;
+  onChange$: PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>;
+};