-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: change focus-visible-color * feat: select * feat: change ring color * refactor: color css * feat: css fixed
- Loading branch information
1 parent
8fef012
commit 09cfca6
Showing
11 changed files
with
269 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
|
|
||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectGroup, | ||
| SelectItem, | ||
| SelectLabel, | ||
| SelectSeparator, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from '.' | ||
|
|
||
| const meta: Meta<typeof Select> = { | ||
| title: 'Components/Select', | ||
| component: Select, | ||
| parameters: { | ||
| layout: 'centered', | ||
| }, | ||
| tags: ['autodocs'], | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const Default: Story = { | ||
| args: {}, | ||
| render: (args) => ( | ||
| <Select {...args}> | ||
| <SelectTrigger className='w-[180px]'> | ||
| <SelectValue placeholder='Select a fruit' /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectGroup> | ||
| <SelectLabel>Fruits</SelectLabel> | ||
| <SelectItem value='apple'>Apple</SelectItem> | ||
| <SelectItem value='banana'>Banana</SelectItem> | ||
| <SelectItem value='blueberry'>Blueberry</SelectItem> | ||
| <SelectItem value='grapes'>Grapes</SelectItem> | ||
| <SelectItem value='pineapple'>Pineapple</SelectItem> | ||
| </SelectGroup> | ||
| <SelectSeparator /> | ||
| <SelectGroup> | ||
| <SelectLabel>Songs</SelectLabel> | ||
| <SelectItem value='water'>Water</SelectItem> | ||
| <SelectItem value='fire'>Fire</SelectItem> | ||
| <SelectItem value='earth'>Earth</SelectItem> | ||
| <SelectItem value='air'>Air</SelectItem> | ||
| <SelectItem value='spaghetti'>Spaghetti</SelectItem> | ||
| </SelectGroup> | ||
| </SelectContent> | ||
| </Select> | ||
| ), | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| 'use client' | ||
|
|
||
| import * as SelectPrimitive from '@radix-ui/react-select' | ||
| import { Check, ChevronDown, ChevronUp } from 'lucide-react' | ||
| import * as React from 'react' | ||
|
|
||
| import { cn } from '@/utils' | ||
|
|
||
| const Select = SelectPrimitive.Root | ||
|
|
||
| const SelectGroup = SelectPrimitive.Group | ||
|
|
||
| const SelectValue = SelectPrimitive.Value | ||
|
|
||
| const SelectTrigger = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Trigger>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| 'flex h-10 w-full items-center justify-between rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-black focus:outline-none focus:ring-2 focus:ring-carmine-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <SelectPrimitive.Icon asChild> | ||
| <ChevronDown className='size-4 opacity-50' /> | ||
| </SelectPrimitive.Icon> | ||
| </SelectPrimitive.Trigger> | ||
| )) | ||
| SelectTrigger.displayName = SelectPrimitive.Trigger.displayName | ||
|
|
||
| const SelectScrollUpButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollUpButton | ||
| ref={ref} | ||
| className={cn( | ||
| 'flex cursor-default items-center justify-center py-1', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <ChevronUp className='size-4' /> | ||
| </SelectPrimitive.ScrollUpButton> | ||
| )) | ||
| SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName | ||
|
|
||
| const SelectScrollDownButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollDownButton | ||
| ref={ref} | ||
| className={cn( | ||
| 'flex cursor-default items-center justify-center py-1', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <ChevronDown className='size-4' /> | ||
| </SelectPrimitive.ScrollDownButton> | ||
| )) | ||
| SelectScrollDownButton.displayName = | ||
| SelectPrimitive.ScrollDownButton.displayName | ||
|
|
||
| const SelectContent = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> | ||
| >(({ className, children, position = 'popper', ...props }, ref) => ( | ||
| <SelectPrimitive.Portal> | ||
| <SelectPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-white text-black shadow-lg', | ||
| 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', | ||
| className | ||
| )} | ||
| position={position} | ||
| {...props} | ||
| > | ||
| <SelectScrollUpButton /> | ||
| <SelectPrimitive.Viewport | ||
| className={cn( | ||
| 'p-1', | ||
| position === 'popper' && | ||
| 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]' | ||
| )} | ||
| > | ||
| {children} | ||
| </SelectPrimitive.Viewport> | ||
| <SelectScrollDownButton /> | ||
| </SelectPrimitive.Content> | ||
| </SelectPrimitive.Portal> | ||
| )) | ||
| SelectContent.displayName = SelectPrimitive.Content.displayName | ||
|
|
||
| const SelectLabel = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Label>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Label | ||
| ref={ref} | ||
| className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SelectLabel.displayName = SelectPrimitive.Label.displayName | ||
|
|
||
| const SelectItem = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Item>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Item | ||
| ref={ref} | ||
| className={cn( | ||
| 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:text-black data-[disabled]:pointer-events-none data-[state=checked]:bg-neutral-100 data-[disabled]:opacity-50', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <span className='absolute left-2 flex size-3.5 items-center justify-center'> | ||
| <SelectPrimitive.ItemIndicator> | ||
| <Check className='size-4' /> | ||
| </SelectPrimitive.ItemIndicator> | ||
| </span> | ||
|
|
||
| <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> | ||
| </SelectPrimitive.Item> | ||
| )) | ||
| SelectItem.displayName = SelectPrimitive.Item.displayName | ||
|
|
||
| const SelectSeparator = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Separator>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Separator | ||
| ref={ref} | ||
| className={cn('-mx-1 my-1 h-px bg-neutral-200', className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SelectSeparator.displayName = SelectPrimitive.Separator.displayName | ||
|
|
||
| export { | ||
| Select, | ||
| SelectGroup, | ||
| SelectValue, | ||
| SelectTrigger, | ||
| SelectContent, | ||
| SelectLabel, | ||
| SelectItem, | ||
| SelectSeparator, | ||
| SelectScrollUpButton, | ||
| SelectScrollDownButton, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.