-
-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
572 additions
and
581 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,42 @@ | ||
| { | ||
| "private": true, | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "vite build && vite build --ssr", | ||
| "preview": "tsc && vite build && vite build --ssr", | ||
| "format": "npx prettier --write ." | ||
| }, | ||
| "devDependencies": { | ||
| "@inertiajs/react": "^1.2.0", | ||
| "@tailwindcss/forms": "^0.5.7", | ||
| "@types/node": "^18.19.42", | ||
| "@types/react": "^18.3.3", | ||
| "@types/react-dom": "^18.3.0", | ||
| "@vitejs/plugin-react": "^4.3.1", | ||
| "autoprefixer": "^10.4.19", | ||
| "axios": "^1.7.2", | ||
| "laravel-vite-plugin": "^1.0.5", | ||
| "postcss": "^8.4.40", | ||
| "prettier": "^3.3.3", | ||
| "prettier-plugin-organize-imports": "^4.0.0", | ||
| "prettier-plugin-tailwindcss": "^0.6.5", | ||
| "react": "^18.3.1", | ||
| "react-dom": "^18.3.1", | ||
| "tailwindcss": "^3.4.7", | ||
| "typescript": "^5.5.4", | ||
| "vite": "^5.3.5", | ||
| "vite-plugin-watch": "^0.3.1" | ||
| }, | ||
| "dependencies": { | ||
| "@irsyadadl/paranoid": "^1.4.2", | ||
| "clsx": "^2.1.1", | ||
| "framer-motion": "^11.3.17", | ||
| "react-aria-components": "^1.3.1", | ||
| "sonner": "^1.5.0", | ||
| "tailwind-merge": "^2.4.0", | ||
| "tailwind-variants": "^0.2.1", | ||
| "tailwindcss-animate": "^1.0.7", | ||
| "tailwindcss-react-aria-components": "^1.1.4" | ||
| } | ||
| "private": true, | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "vite build && vite build --ssr", | ||
| "preview": "tsc && vite build && vite build --ssr", | ||
| "format": "npx prettier --write ." | ||
| }, | ||
| "devDependencies": { | ||
| "@inertiajs/react": "^1.2.0", | ||
| "@tailwindcss/forms": "^0.5.7", | ||
| "@types/node": "^18.19.42", | ||
| "@types/react": "^18.3.3", | ||
| "@types/react-dom": "^18.3.0", | ||
| "@vitejs/plugin-react": "^4.3.1", | ||
| "autoprefixer": "^10.4.19", | ||
| "axios": "^1.7.2", | ||
| "laravel-vite-plugin": "^1.0.5", | ||
| "postcss": "^8.4.40", | ||
| "prettier": "^3.3.3", | ||
| "prettier-plugin-organize-imports": "^4.0.0", | ||
| "prettier-plugin-tailwindcss": "^0.6.5", | ||
| "react": "^18.3.1", | ||
| "react-dom": "^18.3.1", | ||
| "tailwindcss": "^3.4.7", | ||
| "typescript": "^5.5.4", | ||
| "vite": "^5.3.5", | ||
| "vite-plugin-watch": "^0.3.1" | ||
| }, | ||
| "dependencies": { | ||
| "@irsyadadl/paranoid": "^1.4.8", | ||
| "clsx": "^2.1.1", | ||
| "framer-motion": "^11.3.19", | ||
| "react-aria-components": "^1.3.1", | ||
| "sonner": "^1.5.0", | ||
| "tailwind-merge": "^2.4.0", | ||
| "tailwind-variants": "^0.2.1", | ||
| "tailwindcss-animate": "^1.0.7", | ||
| "tailwindcss-react-aria-components": "^1.1.4" | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,101 +1,99 @@ | ||
|
|
||
|
|
||
| import { IconCheck } from '@irsyadadl/paranoid' | ||
| import { | ||
| Collection, | ||
| composeRenderProps, | ||
| Header, | ||
| ListBoxItem as ListBoxItemPrimitive, | ||
| type ListBoxItemProps, | ||
| Section, | ||
| type SectionProps, | ||
| Text, | ||
| type TextProps | ||
| Collection, | ||
| composeRenderProps, | ||
| Header, | ||
| ListBoxItem as ListBoxItemPrimitive, | ||
| type ListBoxItemProps, | ||
| Section, | ||
| type SectionProps, | ||
| Text, | ||
| type TextProps | ||
| } from 'react-aria-components' | ||
| import { tv } from 'tailwind-variants' | ||
|
|
||
| const dropdownItemStyles = tv({ | ||
| base: [ | ||
| 'group flex cursor-default select-none items-center gap-x-1.5 rounded-md py-2 pl-2.5 pr-1 text-base outline outline-0 forced-color-adjust-none lg:text-sm', | ||
| '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5', | ||
| '[&:focus_.text-muted-fg]:text-primary-fg/80', | ||
| '[&_[data-slot=icon]]:size-4', | ||
| 'has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger', | ||
| 'has-submenu:open:bg-primary has-submenu:open:text-primary-fg' | ||
| ], | ||
| variants: { | ||
| isDisabled: { | ||
| false: 'text-fg', | ||
| true: 'text-muted-fg forced-colors:text-[GrayText]' | ||
| base: [ | ||
| 'group flex cursor-default select-none items-center gap-x-1.5 rounded-md py-2 pl-2.5 pr-1 text-base outline outline-0 forced-color-adjust-none lg:text-sm', | ||
| '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5', | ||
| '[&:focus_.text-muted-fg]:text-primary-fg/80', | ||
| '[&_[data-slot=icon]]:size-4', | ||
| 'has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger', | ||
| 'has-submenu:open:bg-primary has-submenu:open:text-primary-fg' | ||
| ], | ||
| variants: { | ||
| isDisabled: { | ||
| false: 'text-fg', | ||
| true: 'text-muted-fg forced-colors:text-[GrayText]' | ||
| }, | ||
| isFocused: { | ||
| false: 'data-[danger=true]:text-danger', | ||
| true: [ | ||
| 'bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]', | ||
| 'data-[danger=true]:bg-danger data-[danger=true]:text-danger-fg' | ||
| ] | ||
| } | ||
| }, | ||
| isFocused: { | ||
| false: 'data-[danger=true]:text-danger', | ||
| true: [ | ||
| 'bg-primary text-primary-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]', | ||
| 'data-[danger=true]:bg-danger data-[danger=true]:text-danger-fg' | ||
| ] | ||
| } | ||
| }, | ||
| compoundVariants: [ | ||
| { | ||
| isFocused: false, | ||
| isOpen: true, | ||
| className: 'bg-zinc-100 dark:bg-zinc-700/60' | ||
| } | ||
| ] | ||
| compoundVariants: [ | ||
| { | ||
| isFocused: false, | ||
| isOpen: true, | ||
| className: 'bg-zinc-100 dark:bg-zinc-700/60' | ||
| } | ||
| ] | ||
| }) | ||
|
|
||
| interface DropdownSectionProps<T> extends SectionProps<T> { | ||
| title?: string | ||
| title?: string | ||
| } | ||
|
|
||
| const DropdownSection = <T extends object>(props: DropdownSectionProps<T>) => { | ||
| return ( | ||
| <Section className="after:block after:h-[5px] after:content-[''] first:-mt-[5px]"> | ||
| <Header className="dsh mb-0.5 px-2 text-sm text-muted-fg">{props.title}</Header> | ||
| <Collection items={props.items}>{props.children}</Collection> | ||
| </Section> | ||
| ) | ||
| return ( | ||
| <Section className="after:block after:h-[5px] after:content-[''] first:-mt-[5px]"> | ||
| <Header className="dsh mb-0.5 px-2 text-sm text-muted-fg">{props.title}</Header> | ||
| <Collection items={props.items}>{props.children}</Collection> | ||
| </Section> | ||
| ) | ||
| } | ||
|
|
||
| const DropdownItem = ({ className, ...props }: ListBoxItemProps) => { | ||
| const textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined) | ||
| return ( | ||
| <ListBoxItemPrimitive | ||
| textValue={textValue} | ||
| className={composeRenderProps(className, (className, renderProps) => | ||
| dropdownItemStyles({ ...renderProps, className }) | ||
| )} | ||
| {...props} | ||
| > | ||
| {composeRenderProps(props.children, (children, { isSelected }) => ( | ||
| <> | ||
| <span className="flex flex-1 items-center gap-2 truncate font-normal group-selected:font-semibold"> | ||
| {children} | ||
| </span> | ||
| <span className="flex w-5 items-center">{isSelected && <IconCheck className="h-4 w-4" />}</span> | ||
| </> | ||
| ))} | ||
| </ListBoxItemPrimitive> | ||
| ) | ||
| const textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined) | ||
| return ( | ||
| <ListBoxItemPrimitive | ||
| textValue={textValue} | ||
| className={composeRenderProps(className, (className, renderProps) => | ||
| dropdownItemStyles({ ...renderProps, className }) | ||
| )} | ||
| {...props} | ||
| > | ||
| {composeRenderProps(props.children, (children, { isSelected }) => ( | ||
| <> | ||
| <span className="flex flex-1 items-center gap-2 truncate font-normal group-selected:font-semibold"> | ||
| {children} | ||
| </span> | ||
| <span className="flex w-5 items-center">{isSelected && <IconCheck className="h-4 w-4" />}</span> | ||
| </> | ||
| ))} | ||
| </ListBoxItemPrimitive> | ||
| ) | ||
| } | ||
|
|
||
| interface DropdownItemSlot extends TextProps { | ||
| label?: TextProps['children'] | ||
| description?: TextProps['children'] | ||
| label?: TextProps['children'] | ||
| description?: TextProps['children'] | ||
| } | ||
| const DropdownItemDetails = ({ label, description, ...props }: DropdownItemSlot) => { | ||
| return ( | ||
| <div className="flex flex-col gap-1"> | ||
| <Text slot="label" className="font-medium lg:text-sm" {...props}> | ||
| {label} | ||
| </Text> | ||
| <Text slot="description" className="text-muted-fg text-xs" {...props}> | ||
| {description} | ||
| </Text> | ||
| </div> | ||
| ) | ||
| return ( | ||
| <div className="flex flex-col gap-1"> | ||
| <Text slot="label" className="font-medium lg:text-sm" {...props}> | ||
| {label} | ||
| </Text> | ||
| <Text slot="description" className="text-muted-fg text-xs" {...props}> | ||
| {description} | ||
| </Text> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| // Note: This is not exposed component, but it's used in other components to render dropdowns. | ||
| export { DropdownItem, dropdownItemStyles, DropdownItemDetails, DropdownSection, type DropdownSectionProps } | ||
| export { DropdownItem, DropdownItemDetails, dropdownItemStyles, DropdownSection, type DropdownSectionProps } |
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
Oops, something went wrong.