feat: add Switch component and showcase

- Introduced a new Switch component with variants and status colors.
- Created a SwitchShowcase component to demonstrate the Switch functionality.
- Updated package.json to include dayjs and rc-component/switch dependencies.
- Added styles for the Switch component in switch.style.css.
- Updated form.style.css to import switch styles.
- Enhanced types for Switch props in types/index.ts.
- Updated globals.css with CSS variables for the Switch component.

packages/ui/src/components/forms/index.ts

@@ -8,3 +8,4 @@ export * from './input/input-number.component';
 
 export * from './textarea/textarea.component';
 export * from './checkbox/checkbox.component';
+export * from './switch/switch.component';

packages/ui/src/components/forms/styles/form.style.css

@@ -3,3 +3,4 @@
 @import './input-number.style.css';
 @import './textarea.style.css';
 @import './checkbox.style.css';
+@import './switch.style.css';

packages/ui/src/components/forms/styles/switch.style.css

@@ -0,0 +1,443 @@
+@layer components {
+  /* =========================================
+     BASE WRAPPER & LABEL
+     ========================================= */
+  .rc-switch-wrapper {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: var(--form-label-font-size);
+    font-weight: var(--form-label-font-weight);
+    color: var(--form-label-color);
+    line-height: 1;
+    gap: 8px; /* Distance between switch and label */
+    transition: all 0.2s;
+    vertical-align: middle;
+  }
+
+  .rc-switch-wrapper-disabled {
+    cursor: not-allowed;
+    color: var(--disabled-text);
+  }
+
+  .rc-switch-label-text {
+    line-height: var(--switch-height); /* Align text vertically with switch */
+    font-size: var(--form-label-font-size);
+    font-weight: var(--form-label-font-weight);
+    color: var(--form-label-color);
+  }
+
+  /* Container for relative positioning of loading state */
+  .rc-switch-container {
+    position: relative;
+    line-height: 0;
+  }
+
+  /* =========================================
+     CORE SWITCH STRUCTURE
+     ========================================= */
+  .rc-switch {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--switch-width);
+    height: var(--switch-height);
+    line-height: calc(var(--switch-height) - 2px);
+    padding: 0;
+    vertical-align: middle;
+    border-radius: 9999px; /* Pill shape */
+    border: 1px solid; /* Border color defined in variants */
+    background-color: transparent; /* Bg defined in variants */
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    overflow: visible; /* Changed to visible for focus rings or overflow effects if needed */
+  }
+
+  /* Focus Ring (Consistent with Checkbox) */
+  .rc-switch:focus-visible,
+  .rc-switch:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--focus-ring-color);
+    border-color: var(--focus-border-color);
+  }
+
+  /* =========================================
+     HANDLE (THE CIRCLE)
+     ========================================= */
+  .rc-switch:after {
+    position: absolute;
+    content: ' ';
+    top: 1px; /* (Height - Handle) / 2 approx, adjusted for border */
+    left: var(--switch-padding);
+    width: var(--switch-handle-size);
+    height: var(--switch-handle-size);
+    border-radius: 50%;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+    transform: scale(1);
+    transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    cursor: pointer;
+  }
+
+  /* Hover Effect on Handle */
+  .rc-switch:hover:after {
+    transform: scale(1.1);
+  }
+
+  .rc-switch:active:after {
+    transform: scale(1); /* Reset on click */
+    width: calc(var(--switch-handle-size) + 4px); /* Stretch effect like iOS */
+  }
+
+  /* =========================================
+     CHECKED STATE
+     ========================================= */
+  .rc-switch-checked:after {
+    left: var(--switch-checked-pos);
+  }
+
+  .rc-switch-checked:active:after {
+    left: calc(var(--switch-checked-pos) - 4px); /* Adjust stretch position */
+  }
+
+  /* =========================================
+     INNER TEXT (ON/OFF LABELS)
+     ========================================= */
+  .rc-switch-inner {
+    display: block;
+    margin: 0 26px 0 8px; /* Adjust spacing */
+    color: #fff;
+    font-size: 12px;
+    transition: margin 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    pointer-events: none;
+  }
+
+  .rc-switch-checked .rc-switch-inner {
+    margin: 0 8px 0 26px;
+  }
+
+  /* =========================================
+     LOADING STATE
+     ========================================= */
+  .rc-switch-loading {
+    opacity: 0.7;
+  }
+
+  /* The SVG Icon inside the handle */
+  .rc-switch-loading-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 12px;
+    height: 12px;
+    color: var(--color-brand-500); /* Loading icon color */
+    animation: rcSwitchLoading 1s infinite linear;
+    /* Center inside the handle */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  /* Override handle style when loading */
+  .rc-switch-loading .rc-switch:after {
+    background-color: #fff; /* Ensure handle is white */
+  }
+
+  @keyframes rcSwitchLoading {
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  /* =========================================
+     VARIANTS & STATUS MATRIX
+     ========================================= */
+
+  /* -------------------------------
+     VARIANT: OUTLINED (Default)
+     Looks like an empty input when off.
+     ------------------------------- */
+  .switch-variant-outlined .rc-switch {
+    background-color: var(--color-gray-200);
+    border-color: var(--color-gray-200);
+  }
+
+  .switch-variant-outlined .rc-switch:hover {
+    border-color: var(--color-brand-500);
+  }
+
+  /* -------------------------------
+     VARIANT: FILLED
+     Looks like a standard grey toggle when off.
+     ------------------------------- */
+  .switch-variant-filled .rc-switch {
+    background-color: var(--color-gray-200);
+    border-color: var(--color-gray-200);
+  }
+
+  .switch-variant-filled .rc-switch:hover {
+    border-color: var(--color-brand-500);
+  }
+
+  /* =========================================
+     STATUS COLORS (Applied to Checked State)
+     ========================================= */
+
+  /* --- DEFAULT (Brand) --- */
+
+  .switch-status-default .rc-switch-checked {
+    border-color: var(--color-brand-500);
+    background-color: var(--color-brand-500);
+  }
+  .switch-status-default .rc-switch:focus-visible,
+  .switch-status-default .rc-switch:focus {
+    box-shadow: 0 0 0 3px var(--color-brand-100);
+    border-color: var(--color-brand-500);
+  }
+
+  /* --- ERROR --- */
+  /* Hover Off state (Optional: Tint border red on hover even if off) */
+  .switch-status-error.switch-variant-outlined .rc-switch {
+    background-color: var(--input-bg);
+    border-color: var(--color-error-300);
+  }
+
+  .switch-status-error.switch-variant-outlined .rc-switch:hover {
+    border-color: var(--color-error-500);
+  }
+
+  .switch-status-error.switch-variant-outlined .rc-switch:after {
+    background-color: var(--color-error-300);
+    box-shadow: 0 2px 4px 0 var(--color-error-100);
+  }
+
+  .switch-status-error.switch-variant-filled .rc-switch {
+    background-color: var(--color-error-50);
+    border-color: var(--color-error-300);
+  }
+
+  .switch-status-error.switch-variant-filled .rc-switch:hover {
+    border-color: var(--color-error-500);
+  }
+
+  .switch-status-error.switch-variant-filled .rc-switch:after {
+    background-color: #fff;
+  }
+
+  /* Checked State */
+  .switch-status-error.switch-variant-outlined .rc-switch-checked {
+    border-color: var(--color-error-500);
+    background-color: var(--color-error-500);
+  }
+  .switch-status-error.switch-variant-outlined .rc-switch-checked:after {
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+  }
+
+  .switch-status-error.switch-variant-filled .rc-switch-checked {
+    border-color: var(--color-error-500);
+    background-color: var(--color-error-500);
+  }
+
+  /* Focus */
+  .switch-status-error .rc-switch:focus-visible,
+  .switch-status-error .rc-switch:focus {
+    box-shadow: 0 0 0 3px var(--color-error-100);
+    border-color: var(--color-error-500);
+  }
+  /* Loading Icon Color */
+  .switch-status-error .rc-switch-loading-icon {
+    color: var(--color-error-500);
+  }
+
+  /* --- WARNING --- */
+  .switch-status-warning.switch-variant-outlined .rc-switch {
+    background-color: var(--input-bg);
+    border-color: var(--color-warning-300);
+  }
+
+  .switch-status-warning.switch-variant-outlined .rc-switch:hover {
+    border-color: var(--color-warning-500);
+  }
+
+  .switch-status-warning.switch-variant-outlined .rc-switch:after {
+    background-color: var(--color-warning-300);
+    box-shadow: 0 2px 4px 0 var(--color-warning-100);
+  }
+
+  .switch-status-warning.switch-variant-filled .rc-switch {
+    background-color: var(--color-warning-50);
+    border-color: var(--color-warning-300);
+  }
+
+  .switch-status-warning.switch-variant-filled .rc-switch:hover {
+    border-color: var(--color-warning-500);
+  }
+
+  .switch-status-warning.switch-variant-filled .rc-switch:after {
+    background-color: #fff;
+  }
+
+  /* Checked State */
+  .switch-status-warning.switch-variant-outlined .rc-switch-checked {
+    border-color: var(--color-warning-500);
+    background-color: var(--color-warning-500);
+  }
+  .switch-status-warning.switch-variant-outlined .rc-switch-checked:after {
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+  }
+
+  .switch-status-warning.switch-variant-filled .rc-switch-checked {
+    border-color: var(--color-warning-500);
+    background-color: var(--color-warning-500);
+  }
+
+  /* Focus */
+  .switch-status-warning .rc-switch:focus-visible,
+  .switch-status-warning .rc-switch:focus {
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+    border-color: var(--color-warning-500);
+  }
+  /* Loading Icon Color */
+  .switch-status-warning .rc-switch-loading-icon {
+    color: var(--color-warning-500);
+  }
+
+  /* --- SUCCESS --- */
+  .switch-status-success.switch-variant-outlined .rc-switch {
+    background-color: var(--input-bg);
+    border-color: var(--color-success-300);
+  }
+
+  .switch-status-success.switch-variant-outlined .rc-switch:hover {
+    border-color: var(--color-success-500);
+  }
+
+  .switch-status-success.switch-variant-outlined .rc-switch:after {
+    background-color: var(--color-success-300);
+    box-shadow: 0 2px 4px 0 var(--color-success-100);
+  }
+
+  .switch-status-success.switch-variant-filled .rc-switch {
+    background-color: var(--color-success-50);
+    border-color: var(--color-success-300);
+  }
+
+  .switch-status-success.switch-variant-filled .rc-switch:hover {
+    border-color: var(--color-success-500);
+  }
+
+  .switch-status-success.switch-variant-filled .rc-switch:after {
+    background-color: #fff;
+  }
+
+  /* Checked State */
+  .switch-status-success.switch-variant-outlined .rc-switch-checked {
+    border-color: var(--color-success-500);
+    background-color: var(--color-success-500);
+  }
+  .switch-status-success.switch-variant-outlined .rc-switch-checked:after {
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+  }
+
+  .switch-status-success.switch-variant-filled .rc-switch-checked {
+    border-color: var(--color-success-500);
+    background-color: var(--color-success-500);
+  }
+
+  /* Focus */
+  .switch-status-success .rc-switch:focus-visible,
+  .switch-status-success .rc-switch:focus {
+    box-shadow: 0 0 0 3px var(--color-success-100);
+    border-color: var(--color-success-500);
+  }
+  /* Loading Icon Color */
+  .switch-status-success .rc-switch-loading-icon {
+    color: var(--color-success-500);
+  }
+
+  /* --- INFO --- */
+  .switch-status-info.switch-variant-outlined .rc-switch {
+    background-color: var(--input-bg);
+    border-color: var(--color-info-300);
+  }
+
+  .switch-status-info.switch-variant-outlined .rc-switch:hover {
+    border-color: var(--color-info-500);
+  }
+
+  .switch-status-info.switch-variant-outlined .rc-switch:after {
+    background-color: var(--color-info-300);
+    box-shadow: 0 2px 4px 0 var(--color-info-100);
+  }
+
+  .switch-status-info.switch-variant-filled .rc-switch {
+    background-color: var(--color-info-50);
+    border-color: var(--color-info-300);
+  }
+
+  .switch-status-info.switch-variant-filled .rc-switch:hover {
+    border-color: var(--color-info-500);
+  }
+
+  .switch-status-info.switch-variant-filled .rc-switch:after {
+    background-color: #fff;
+  }
+
+  /* Checked State */
+  .switch-status-info.switch-variant-outlined .rc-switch-checked {
+    border-color: var(--color-info-500);
+    background-color: var(--color-info-500);
+  }
+  .switch-status-info.switch-variant-outlined .rc-switch-checked:after {
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+  }
+
+  .switch-status-info.switch-variant-filled .rc-switch-checked {
+    border-color: var(--color-info-500);
+    background-color: var(--color-info-500);
+  }
+
+  /* Focus */
+  .switch-status-info .rc-switch:focus-visible,
+  .switch-status-info .rc-switch:focus {
+    box-shadow: 0 0 0 3px var(--color-info-100);
+    border-color: var(--color-info-500);
+  }
+  /* Loading Icon Color */
+  .switch-status-info .rc-switch-loading-icon {
+    color: var(--color-info-500);
+  }
+
+  /* =========================================
+     DISABLED STATE
+     ========================================= */
+  .rc-switch-disabled,
+  .rc-switch-wrapper-disabled .rc-switch {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--disabled-bg) !important;
+    border-color: var(--disabled-border) !important;
+  }
+
+  .rc-switch-disabled:after,
+  .rc-switch-wrapper-disabled .rc-switch:after {
+    cursor: not-allowed;
+    background-color: #f9fafb; /* Lighter white/gray for disabled knob */
+  }
+
+  /* If checked and disabled */
+  .rc-switch-disabled.rc-switch-checked {
+    background-color: var(--disabled-border) !important; /* Darker gray to show it is "on" but disabled */
+  }
+
+  /* Disable animations/hovers */
+  .rc-switch-disabled:hover:after {
+    transform: scale(1);
+    animation-name: none;
+  }
+}

packages/ui/src/components/forms/switch/switch.component.tsx

@@ -0,0 +1,65 @@
+import { forwardRef } from 'react';
+import RcSwitch from '@rc-component/switch';
+import { SwitchProps } from '../types';
+
+/**
+ * Small Spinner Component (SVG)
+ */
+const LoadingSpinner = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    focusable="false"
+    className="rc-switch-loading-icon"
+    data-icon="loading"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" />
+  </svg>
+);
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
+  const {
+    label,
+    status = 'default',
+    variant = 'outlined',
+    className,
+    children,
+    style,
+    loading,
+    disabled,
+    ...rest
+  } = props;
+
+  const displayLabel = label || children;
+
+  const isEnabled = !disabled && !loading;
+
+  const wrapperClass = [
+    'rc-switch-wrapper',
+    `switch-status-${status}`,
+    `switch-variant-${variant}`,
+    !isEnabled ? 'rc-switch-wrapper-disabled' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <label className={wrapperClass} style={style}>
+      <span className={`rc-switch-container ${loading ? 'rc-switch-loading' : ''}`}>
+        <RcSwitch
+          ref={ref}
+          prefixCls="rc-switch"
+          disabled={!isEnabled}
+          loadingIcon={loading ? <LoadingSpinner /> : null}
+          {...rest}
+        />
+      </span>
+
+      {displayLabel && <span className="rc-switch-label-text">{displayLabel}</span>}
+    </label>
+  );
+});
+
+Switch.displayName = 'Switch';

packages/ui/src/components/forms/types/index.ts

@@ -1,6 +1,6 @@
 import type { FormProps as RcFormProps } from '@rc-component/form';
 import type { Rule } from '@rc-component/form/lib/interface';
-import { ReactNode, ReactElement } from 'react';
+import { ReactNode, ReactElement, ComponentProps, CSSProperties } from 'react';
 
 import { InputProps as RcInputProps } from '@rc-component/input';
 import { TextAreaProps as RcTextAreaProps } from '@rc-component/textarea';
@@ -8,6 +8,9 @@ import { InputNumberProps as RcInputNumberProps } from '@rc-component/input-numb
 
 import { CheckboxProps as RcCheckboxProps } from '@rc-component/checkbox';
 
+import RcSwitch from '@rc-component/switch';
+type RcSwitchProps = ComponentProps<typeof RcSwitch>;
+
 /**
  * Define possible input statuses
  */
@@ -74,3 +77,11 @@ export interface TextAreaProps extends RcTextAreaProps, BaseFormInputComponentPr
 export interface CheckboxProps extends RcCheckboxProps, BaseFormInputComponentProps {
   label?: ReactNode;
 }
+
+/**
+ * Define Switch props
+ */
+export interface SwitchProps extends RcSwitchProps, BaseFormInputComponentProps {
+  label?: ReactNode;
+  loading?: boolean;
+}

packages/ui/src/globals.css

@@ -156,6 +156,15 @@
   --disabled-bg: #f3f4f6;
   --disabled-text: var(--color-gray-400);
   --disabled-border: #e5e7eb;
+
+  /* SWITCH COMPONENT VARIABLES */
+  --switch-width: 44px;
+  --switch-height: 22px;
+  --switch-padding: 2px; /* Distance between handle and edge */
+
+  /* Calculate the handle position when checked */
+  /* Formula: Width - HandleSize - Padding */
+  --switch-checked-pos: calc(var(--switch-width) - var(--switch-handle-size) - var(--switch-padding));
 }
 
 /* =========================================