Added: Select component added.

app/docs/components/select/Select.mdx

@@ -0,0 +1,32 @@
+import { DefaultSelect, DefaultSelectCode } from './variant/DefaultSelect'
+import { SelectWithActionIcon, SelectWithActionIconCode } from './variant/SelectWithActionIcon'
+import { SelectWithItemIcon, SelectWithItemIconCode } from './variant/SelectWithItemIcon'
+import CodeHighlightPreview from '../../../components/CodeHighlightPreview'
+
+## Table of Contents
+
+The Select component is a versatile and user-friendly interface element that enables users to choose from a list of options presented in a dropdown menu. It can be customized with various features, such as icons and actions, to enhance the user experience. Whether used in forms, settings, or filtering options, the Select component provides a clean and efficient way to navigate and select items from a predefined list. With additional customization options like action icons or item-specific icons, it can be tailored to fit different use cases and design requirements.
+
+## Default Select
+
+A simple and basic select component for general use cases, allowing users to choose an option from a dropdown list.
+
+<CodeHighlightPreview code={DefaultSelectCode}>
+  <DefaultSelect />
+</CodeHighlightPreview>
+
+## Select With Action Icon
+
+An enhanced select component that includes an action icon, allowing users to perform additional actions directly within the dropdown.
+
+<CodeHighlightPreview code={SelectWithActionIconCode}>
+  <SelectWithActionIcon />
+</CodeHighlightPreview>
+
+## Select With Item Icon
+
+A select component where each item includes an icon, providing a more visual representation of the options available in the dropdown.
+
+<CodeHighlightPreview code={SelectWithItemIconCode}>
+  <SelectWithItemIcon />
+</CodeHighlightPreview>

app/docs/components/select/index.tsx

@@ -0,0 +1,7 @@
+'use client'
+import type { FC } from 'react'
+import SelectDocsContent from './Select.mdx'
+
+const SelectDocs: FC = () => <SelectDocsContent />
+
+export default SelectDocs

app/docs/components/select/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata, NextPage } from 'next'
+import SelectDocs from '.'
+import { DocsContentLayout } from '../../../components/DocsContentLayout'
+import EditPage from '../../../components/EditPage'
+
+export const metadata: Metadata = {
+  description:
+    'The Select component is a versatile and user-friendly interface element that enables users to choose from a list of options presented in a dropdown menu. It can be customized with various features, such as icons and actions, to enhance the user experience.',
+  title: 'Select - Keep React',
+}
+
+const page: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <SelectDocs />
+      <EditPage pageLink="/docs/components/select" nextPageLink="/docs/components/spinner" nextPageName="Spinner" />
+    </DocsContentLayout>
+  )
+}
+
+export default page

app/docs/components/select/variant/DefaultSelect.tsx

@@ -0,0 +1,56 @@
+import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from '../../../../src'
+
+const DefaultSelect = () => {
+  return (
+    <div className="flex items-center justify-center px-5 py-3">
+      <Select>
+        <SelectAction className="w-[20rem]">
+          <SelectValue placeholder="Select team" />
+        </SelectAction>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Team</SelectLabel>
+            <SelectItem value="gd">Graphic Designer</SelectItem>
+            <SelectItem value="ud">UX Designer </SelectItem>
+            <SelectItem value="pm">Product Manager</SelectItem>
+            <SelectItem value="wde">Web Designer</SelectItem>
+            <SelectItem value="swe">Software Engineer</SelectItem>
+            <SelectItem value="mm">Marketing Manager</SelectItem>
+            <SelectItem value="wd">Web Developer</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+const DefaultSelectCode = {
+  'SelectComponent.tsx': `
+import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from 'keep-react'
+
+export const SelectComponent = () => {
+  return (
+    <Select>
+      <SelectAction className="w-[20rem]">
+        <SelectValue placeholder="Select team" />
+      </SelectAction>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Team</SelectLabel>
+          <SelectItem value="gd">Graphic Designer</SelectItem>
+          <SelectItem value="ud">UX Designer </SelectItem>
+          <SelectItem value="pm">Product Manager</SelectItem>
+          <SelectItem value="wde">Web Designer</SelectItem>
+          <SelectItem value="swe">Software Engineer</SelectItem>
+          <SelectItem value="mm">Marketing Manager</SelectItem>
+          <SelectItem value="wd">Web Developer</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
+
+`,
+}
+
+export { DefaultSelect, DefaultSelectCode }

app/docs/components/select/variant/SelectWithActionIcon.tsx

@@ -0,0 +1,63 @@
+'use client'
+import { User } from 'phosphor-react'
+import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from '../../../../src'
+
+const SelectWithActionIcon = () => {
+  return (
+    <div className="flex items-center justify-center px-5 py-3">
+      <Select>
+        <SelectAction className="w-[20rem]">
+          <div className="flex items-center gap-2.5">
+            <span>
+              <User className="h-4 w-4" />
+            </span>
+            <SelectValue placeholder="Select team member" />
+          </div>
+        </SelectAction>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Member</SelectLabel>
+            <SelectItem value="jd">John Doe</SelectItem>
+            <SelectItem value="am">Alex Mack</SelectItem>
+            <SelectItem value="gb">Gordon Brown</SelectItem>
+            <SelectItem value="jc">Jimmie Crawford</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+const SelectWithActionIconCode = {
+  'SelectComponent.tsx': `
+'use client'
+import { User } from 'phosphor-react'
+import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from 'keep-react'
+
+export const SelectComponent = () => {
+  return (
+    <Select>
+      <SelectAction className="w-[20rem]">
+        <div className="flex items-center gap-2.5">
+          <span>
+            <User className="h-4 w-4" />
+          </span>
+          <SelectValue placeholder="Select team member" />
+        </div>
+      </SelectAction>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Member</SelectLabel>
+          <SelectItem value="jd">John Doe</SelectItem>
+          <SelectItem value="am">Alex Mack</SelectItem>
+          <SelectItem value="gb">Gordon Brown</SelectItem>
+          <SelectItem value="jc">Jimmie Crawford</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
+`,
+}
+
+export { SelectWithActionIcon, SelectWithActionIconCode }

app/docs/components/select/variant/SelectWithItemIcon.tsx

@@ -0,0 +1,109 @@
+'use client'
+import { Envelope } from 'phosphor-react'
+import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from '../../../../src'
+
+const SelectWithItemIcon = () => {
+  return (
+    <div className="flex items-center justify-center px-5 py-3">
+      <Select>
+        <SelectAction className="w-[20rem]">
+          <SelectValue placeholder="Select email" />
+        </SelectAction>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Email Address</SelectLabel>
+            <SelectItem value="email1">
+              <div className="flex items-center gap-2.5">
+                <span>
+                  <Envelope className="h-4 w-4" />
+                </span>
+                <span>johnny.cooper@example.com</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="email2">
+              <div className="flex items-center gap-2.5">
+                <span>
+                  <Envelope className="h-4 w-4" />
+                </span>
+                <span>johnni.carlson@example.com</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="email3">
+              <div className="flex items-center gap-2.5">
+                <span>
+                  <Envelope className="h-4 w-4" />
+                </span>
+                <span>carolyn.ramos@example.com</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="email4">
+              <div className="flex items-center gap-2.5">
+                <span>
+                  <Envelope className="h-4 w-4" />
+                </span>
+                <span>jack.morris@example.com</span>
+              </div>
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+const SelectWithItemIconCode = {
+  'SelectComponent.tsx': `
+'use client'
+import { Envelope } from 'phosphor-react'
+import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from 'keep-react'
+
+export const SelectComponent = () => {
+  return (
+    <Select>
+      <SelectAction className="w-[20rem]">
+        <SelectValue placeholder="Select email" />
+      </SelectAction>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Email Address</SelectLabel>
+          <SelectItem value="email1">
+            <div className="flex items-center gap-2.5">
+              <span>
+                <Envelope className="h-4 w-4" />
+              </span>
+              <span>johnny.cooper@example.com</span>
+            </div>
+          </SelectItem>
+          <SelectItem value="email2">
+            <div className="flex items-center gap-2.5">
+              <span>
+                <Envelope className="h-4 w-4" />
+              </span>
+              <span>johnni.carlson@example.com</span>
+            </div>
+          </SelectItem>
+          <SelectItem value="email3">
+            <div className="flex items-center gap-2.5">
+              <span>
+                <Envelope className="h-4 w-4" />
+              </span>
+              <span>carolyn.ramos@example.com</span>
+            </div>
+          </SelectItem>
+          <SelectItem value="email4">
+            <div className="flex items-center gap-2.5">
+              <span>
+                <Envelope className="h-4 w-4" />
+              </span>
+              <span>jack.morris@example.com</span>
+            </div>
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
+`,
+}
+
+export { SelectWithItemIcon, SelectWithItemIconCode }

app/docs/components/slider/page.tsx

@@ -13,7 +13,7 @@ const page: NextPage = () => {
   return (
     <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
       <SliderDocs />
-      <EditPage pageLink="/docs/components/slider" nextPageLink="/docs/components/spinner" nextPageName="Spinner" />
+      <EditPage pageLink="/docs/components/slider" nextPageLink="/docs/components/select" nextPageName="Select" />
     </DocsContentLayout>
   )
 }

app/main.css

@@ -3,7 +3,7 @@ html {
 }
 
 .ReactCollapse--collapse {
-  transition: height 300ms;
+  transition: height 300ms ease-in-out;
 }
 
 input[type='number']::-webkit-inner-spin-button,

app/src/components/Carousel/Viewport.tsx

@@ -5,12 +5,12 @@ import { useCarouselContext } from './CarouselContext'
 import { carouselTheme } from './theme'
 
 export const CarouselViewport = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ children }, ref: Ref<HTMLDivElement>) => {
+  ({ children, className }, ref: Ref<HTMLDivElement>) => {
     const theme = carouselTheme
     const { emblaRef } = useCarouselContext()
 
     return (
-      <div className={cn(theme.viewport)} ref={ref || emblaRef}>
+      <div className={cn(theme.viewport, className)} ref={ref || emblaRef}>
         {children}
       </div>
     )

app/src/components/Select/SelectAction.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { Icon, Trigger } from '@radix-ui/react-select'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+import { cn } from '../../utils/cn'
+
+const SelectAction = forwardRef<ElementRef<typeof Trigger>, ComponentPropsWithoutRef<typeof Trigger>>(
+  ({ className, children, ...props }, ref) => (
+    <Trigger
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full items-center justify-between rounded-lg border bg-white px-3 py-2 text-body-4 font-normal text-metal-900 placeholder:font-normal placeholder:text-metal-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-200 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-metal-800 dark:bg-metal-900 dark:text-white dark:placeholder:text-metal-300 dark:focus-visible:ring-metal-900',
+        className,
+      )}
+      {...props}>
+      {children}
+      <Icon asChild>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4 fill-metal-900  dark:fill-white"
+          viewBox="0 0 256 256">
+          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
+        </svg>
+      </Icon>
+    </Trigger>
+  ),
+)
+SelectAction.displayName = Trigger.displayName
+
+export { SelectAction }

app/src/components/Select/SelectContent.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { Content, Portal, Viewport } from '@radix-ui/react-select'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+import { cn } from '../../utils/cn'
+import { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'
+
+const SelectContent = forwardRef<ElementRef<typeof Content>, ComponentPropsWithoutRef<typeof Content>>(
+  ({ className, children, position = 'popper', ...props }, ref) => (
+    <Portal>
+      <Content
+        ref={ref}
+        className={cn(
+          'relative z-50 max-h-96 overflow-hidden rounded-xl border bg-white p-4 text-metal-600 dark:border-metal-900 dark:bg-metal-900',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'data-[state=open]:animate-fadeInUp',
+          className,
+        )}
+        position={position}
+        {...props}>
+        <SelectScrollUpButton />
+        <Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[calc(var(--radix-select-trigger-width)-32px)]',
+          )}>
+          {children}
+        </Viewport>
+        <SelectScrollDownButton />
+      </Content>
+    </Portal>
+  ),
+)
+SelectContent.displayName = Content.displayName
+
+export { SelectContent }