fix: add NativeSelect to Docs, align colours [MDS-723]

docs/app/components/server/nativeSelect/description.md

@@ -0,0 +1,3 @@
+A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from.
+
+When collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from. Moon.io supports two types of selects, one whichs opens browser's native styling option list and Dropdown.

docs/app/components/server/nativeSelect/examples/Default.tsx

@@ -0,0 +1,10 @@
+import NativeSelect from '@heathmont/moon-base-tw/lib/nativeSelect/NativeSelect';
+
+export const Default = () => (
+  <NativeSelect>
+    <option value="Italy">Italy</option>
+    <option value="Spain">Spain</option>
+    <option value="China">China</option>
+    <option value="Germany">Germany</option>
+  </NativeSelect>
+);

docs/app/components/server/nativeSelect/page.tsx

@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/nativeSelect/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function NativeSelect() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.nativeSelect.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">NativeSelect</h1>
+      <MDX markdown={server.nativeSelect.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.nativeSelect.examples.Default}
+      />
+    </div>
+  );
+}

docs/app/components/types.ts

@@ -60,6 +60,12 @@ export interface Examples {
         Default: 'string';
       };
     };
+    nativeSelect: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
     tag: {
       description: 'string';
       examples: {

workspaces/base/src/index.ts

@@ -18,8 +18,6 @@ export { default as mergeClassnames } from './mergeClassnames/mergeClassnames';
 export * from './mergeClassnames/mergeClassnames';
 export { default as NativeSelect } from './nativeSelect/NativeSelect';
 export * from './nativeSelect/NativeSelect';
-export { default as getSizeStyles } from './nativeSelect/prvate/getSizeStyles';
-export * from './nativeSelect/prvate/getSizeStyles';
 export { default as Pagination } from './pagination/Pagination';
 export * from './pagination/Pagination';
 export { default as getPageInfo } from './pagination/getPageInfo';

workspaces/base/src/nativeSelect/NativeSelect.tsx

@@ -1,19 +1,10 @@
-import React, { ReactNode, forwardRef } from 'react';
-import getSizeStyles from './prvate/getSizeStyles';
+import React, { forwardRef } from 'react';
+import getSizeStyles from './private/getSizeStyles';
+import type NativeSelectProps from './private/types/NativeSelectProps';
+import type WithChildren from './private/types/WithChildren';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 import ControlsChevronDownSmall from '../private/icons/ControlsChevronDownSmall';
 
-type WithChildren<T = {}> = T & { children?: ReactNode };
-
-export interface NativeSelectProps
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-  className?: string;
-  size?: 'sm' | 'md' | 'lg';
-  error?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-}
-
 const NativeSelectPure = forwardRef<
   HTMLSelectElement,
   WithChildren<NativeSelectProps>
@@ -32,7 +23,7 @@ const NativeSelectPure = forwardRef<
         disabled={disabled || readOnly}
         className={mergeClassnames(
           'block w-full max-w-full py-0 px-4 m-0 appearance-none text-[1rem] text-bulma transition-shadow box-border relative z-[2] cursor-pointer',
-          'bg-gohan shadow-input hover:shadow-input-hov',
+          'bg-goku shadow-input hover:shadow-input-hov',
           'focus:shadow-input-focus focus:outline-none',
           error &&
             'shadow-input-err hover:shadow-input-err focus:shadow-input-err',

workspaces/base/src/nativeSelect/private/types/NativeSelectProps.ts

@@ -0,0 +1,10 @@
+interface NativeSelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+  error?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+export default NativeSelectProps;

workspaces/base/src/nativeSelect/private/types/WithChildren.ts

@@ -0,0 +1,3 @@
+type WithChildren<T = {}> = T & { children?: React.ReactNode };
+
+export default WithChildren;