feat: Refactor example page and showcase components

- Updated ExamplePage to use a single Showcase component instead of separate InputShowCase and FormShowcase components.
- Added CheckboxShowcase, FormShowcase, and InputShowCase components to the showcase directory.
- Implemented Checkbox component with various states and styles.
- Enhanced InputShowCase to demonstrate different input types and states.
- Integrated new styles for checkbox variants and states.
- Updated package dependencies to include @rc-component/checkbox.

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

@@ -0,0 +1,34 @@
+import RcCheckbox from '@rc-component/checkbox';
+import { CheckboxProps } from '../types';
+import { forwardRef } from 'react';
+import { InputRef } from '@rc-component/input/lib/interface';
+
+export const Checkbox = forwardRef<InputRef, CheckboxProps>((props, ref) => {
+  const { label, status = 'default', variant = 'outlined', className, children, ...rest } = props;
+
+  const displayLabel = label || children;
+
+  const wrapperClass = [
+    'rc-checkbox-wrapper',
+    `checkbox-status-${status}`,
+    `checkbox-variant-${variant}`,
+    rest.disabled ? 'rc-checkbox-wrapper-disabled' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <label className={wrapperClass}>
+      <span className="rc-checkbox-container">
+        <RcCheckbox {...rest} prefixCls="rc-checkbox" />
+        {/* HAPUS BARIS DI BAWAH INI */}
+        {/* <span className="rc-checkbox-inner" /> */}
+      </span>
+
+      {displayLabel && <span className="rc-checkbox-label-text">{displayLabel}</span>}
+    </label>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';