diff --git a/src/custom/docs/components/header/CodeCopy.tsx b/src/custom/docs/components/header/CodeCopy.tsx index 713e2bc..3c67906 100644 --- a/src/custom/docs/components/header/CodeCopy.tsx +++ b/src/custom/docs/components/header/CodeCopy.tsx @@ -1,32 +1,40 @@ -'use client' -import React from "react" +"use client"; +import React from "react"; -import {Button, cn} from 'src' -import { Check, Copy } from "lucide-react" -export const CodeCopy = (props: {textToCopy: string, className?: string}) => { +import { Button, cn } from "src"; +import { Check, Copy } from "lucide-react"; +export const CodeCopy = (props: { textToCopy: string; className?: string }) => { + const [copied, setHasCopied] = React.useState(false); - const [copied, setHasCopied] = React.useState(false) - - return
- {props.textToCopy} + return ( +
+ {props.textToCopy} - -
-} +
+ ); +}; diff --git a/src/shadcn/ui/button.tsx b/src/shadcn/ui/button.tsx index 706de48..08d2a24 100644 --- a/src/shadcn/ui/button.tsx +++ b/src/shadcn/ui/button.tsx @@ -14,7 +14,7 @@ const buttonVariants = cva( destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", outline: - "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", + "border border-input bg-card shadow-sm hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", diff --git a/src/shadcn/ui/calendar.tsx b/src/shadcn/ui/calendar.tsx index 5fdc4c2..ec22968 100644 --- a/src/shadcn/ui/calendar.tsx +++ b/src/shadcn/ui/calendar.tsx @@ -27,7 +27,7 @@ function Calendar({ nav: "space-x-1 flex items-center", nav_button: cn( buttonVariants({ variant: "outline" }), - "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" + "h-7 w-7 bg-card p-0 opacity-50 hover:opacity-100" ), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", @@ -60,8 +60,8 @@ function Calendar({ ...classNames, }} components={{ - IconLeft: ({ ...props }) => , - IconRight: ({ ...props }) => , + IconLeft: ({ ...props }) => , + IconRight: ({ ...props }) => , }} {...props} /> diff --git a/src/shadcn/ui/command.tsx b/src/shadcn/ui/command.tsx index 78a4ace..50f1bab 100644 --- a/src/shadcn/ui/command.tsx +++ b/src/shadcn/ui/command.tsx @@ -28,8 +28,8 @@ interface CommandDialogProps extends DialogProps {} const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( - - + + {children} @@ -41,12 +41,12 @@ const CommandInput = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( -
- +
+ ((props, ref) => ( )); @@ -117,8 +117,8 @@ const CommandItem = React.forwardRef< ( boolean) + filter?: boolean | ((keyword: string, current: string) => boolean); - disabled?: boolean + disabled?: boolean; - maxCount?: number + maxCount?: number; - itemCache: Map + itemCache: Map; } const MultiSelectContext = React.createContext< MultiSelectContextValue | undefined ->(undefined) +>(undefined); const useMultiSelect = () => { - const context = React.useContext(MultiSelectContext) + const context = React.useContext(MultiSelectContext); if (!context) { - throw new Error("useMultiSelect must be used within MultiSelectProvider") + throw new Error("useMultiSelect must be used within MultiSelectProvider"); } - return context -} + return context; +}; type MultiSelectProps = React.ComponentPropsWithoutRef< typeof PopoverPrimitive.Root > & { - value?: string[] - onValueChange?(value: string[], items: MultiSelectOptionItem[]): void - onSelect?(value: string, item: MultiSelectOptionItem): void - onDeselect?(value: string, item: MultiSelectOptionItem): void - defaultValue?: string[] - onSearch?(keyword: string | undefined): void - filter?: boolean | ((keyword: string, current: string) => boolean) - disabled?: boolean - maxCount?: number -} + value?: string[]; + onValueChange?(value: string[], items: MultiSelectOptionItem[]): void; + onSelect?(value: string, item: MultiSelectOptionItem): void; + onDeselect?(value: string, item: MultiSelectOptionItem): void; + defaultValue?: string[]; + onSearch?(keyword: string | undefined): void; + filter?: boolean | ((keyword: string, current: string) => boolean); + disabled?: boolean; + maxCount?: number; +}; const MultiSelect: React.FC = ({ value: valueProp, @@ -98,60 +93,60 @@ const MultiSelect: React.FC = ({ }) => { const itemCache = React.useRef( new Map() - ).current + ).current; const handleValueChange = React.useCallback( (state: string[]) => { if (onValueChangeProp) { - const items = state.map((value) => itemCache.get(value)!) + const items = state.map((value) => itemCache.get(value)!); - onValueChangeProp(state, items) + onValueChangeProp(state, items); } }, [onValueChangeProp] - ) + ); const [value, setValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue, onChange: handleValueChange, - }) + }); const [open, setOpen] = useControllableState({ prop: openProp, defaultProp: defaultOpen, onChange: onOpenChange, - }) + }); const handleSelect = React.useCallback( (value: string, item: MultiSelectOptionItem) => { setValue((prev) => { if (prev?.includes(value)) { - return prev + return prev; } - onSelectProp?.(value, item) + onSelectProp?.(value, item); - return prev ? [...prev, value] : [value] - }) + return prev ? [...prev, value] : [value]; + }); }, [onSelectProp, setValue] - ) + ); const handleDeselect = React.useCallback( (value: string, item: MultiSelectOptionItem) => { setValue((prev) => { if (!prev || !prev.includes(value)) { - return prev + return prev; } - onDeselectProp?.(value, item) + onDeselectProp?.(value, item); - return prev.filter((v) => v !== value) - }) + return prev.filter((v) => v !== value); + }); }, [onDeselectProp, setValue] - ) + ); const contextValue = React.useMemo(() => { return { @@ -164,7 +159,7 @@ const MultiSelect: React.FC = ({ onSelect: handleSelect, onDeselect: handleDeselect, itemCache, - } + }; }, [ value, open, @@ -174,7 +169,7 @@ const MultiSelect: React.FC = ({ maxCount, handleSelect, handleDeselect, - ]) + ]); return ( @@ -184,26 +179,26 @@ const MultiSelect: React.FC = ({ onOpenChange={setOpen} /> - ) -} + ); +}; -MultiSelect.displayName = "MultiSelect" +MultiSelect.displayName = "MultiSelect"; -type MultiSelectTriggerElement = React.ElementRef +type MultiSelectTriggerElement = React.ElementRef; interface MultiSelectTriggerProps extends ComponentPropsWithoutRef {} const PreventClick = (e: React.MouseEvent | React.TouchEvent) => { - e.preventDefault() - e.stopPropagation() -} + e.preventDefault(); + e.stopPropagation(); +}; const MultiSelectTrigger = React.forwardRef< MultiSelectTriggerElement, MultiSelectTriggerProps >(({ className, children, ...props }, forwardedRef) => { - const { disabled } = useMultiSelect() + const { disabled } = useMultiSelect(); return ( @@ -212,7 +207,7 @@ const MultiSelectTrigger = React.forwardRef< data-disabled={disabled} {...props} className={cn( - "flex h-full min-h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring [&>span]:line-clamp-1", + "flex h-full min-h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-card px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring [&>span]:line-clamp-1", disabled ? "cursor-not-allowed opacity-50" : "cursor-text", className )} @@ -220,19 +215,19 @@ const MultiSelectTrigger = React.forwardRef< onTouchStart={disabled ? PreventClick : props.onTouchStart} > {children} - +
- ) -}) + ); +}); -MultiSelectTrigger.displayName = "MultiSelectTrigger" +MultiSelectTrigger.displayName = "MultiSelectTrigger"; interface MultiSelectValueProps extends ComponentPropsWithoutRef { - placeholder?: string - maxDisplay?: number - maxItemLength?: number + placeholder?: string; + maxDisplay?: number; + maxItemLength?: number; } const MultiSelectValue = React.forwardRef< @@ -243,23 +238,23 @@ const MultiSelectValue = React.forwardRef< { className, placeholder, maxDisplay, maxItemLength, ...props }, forwardRef ) => { - const { value, itemCache, onDeselect } = useMultiSelect() - const [firstRendered, setFirstRendered] = React.useState(false) + const { value, itemCache, onDeselect } = useMultiSelect(); + const [firstRendered, setFirstRendered] = React.useState(false); const renderRemain = - maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0 - const renderItems = renderRemain ? value.slice(0, maxDisplay) : value + maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0; + const renderItems = renderRemain ? value.slice(0, maxDisplay) : value; React.useLayoutEffect(() => { - setFirstRendered(true) - }, []) + setFirstRendered(true); + }, []); if (!value.length || !firstRendered) { return ( - + {placeholder} - ) + ); } return ( @@ -273,71 +268,71 @@ const MultiSelectValue = React.forwardRef< ref={forwardRef} > {renderItems.map((value) => { - const item = itemCache.get(value) + const item = itemCache.get(value); - const content = item?.label || value + const content = item?.label || value; const child = maxItemLength && typeof content === "string" && content.length > maxItemLength ? `${content.slice(0, maxItemLength)}...` - : content + : content; const el = ( { - e.preventDefault() - e.stopPropagation() - onDeselect(value, item!) + e.preventDefault(); + e.stopPropagation(); + onDeselect(value, item!); }} > {child} - + - ) + ); if (child !== content) { return ( - {el} + {el} {content} - ) + ); } - return el + return el; })} {renderRemain ? ( - + +{renderRemain} ) : null}
- ) + ); } -) +); const MultiSelectSearch = React.forwardRef< React.ElementRef, ComponentPropsWithoutRef >((props, ref) => { - const { onSearch } = useMultiSelect() + const { onSearch } = useMultiSelect(); - return -}) + return ; +}); -MultiSelectSearch.displayName = "MultiSelectSearch" +MultiSelectSearch.displayName = "MultiSelectSearch"; const MultiSelectList = React.forwardRef< React.ElementRef, @@ -349,10 +344,10 @@ const MultiSelectList = React.forwardRef< className={cn("py-1 px-0 max-h-[unset]", className)} {...props} /> - ) -}) + ); +}); -MultiSelectList.displayName = "MultiSelectList" +MultiSelectList.displayName = "MultiSelectList"; interface MultiSelectContentProps extends ComponentPropsWithoutRef {} @@ -361,25 +356,25 @@ const MultiSelectContent = React.forwardRef< React.ElementRef, MultiSelectContentProps >(({ className, children, ...props }, ref) => { - const context = useMultiSelect() + const context = useMultiSelect(); - const fragmentRef = React.useRef() + const fragmentRef = React.useRef(); if (!fragmentRef.current && typeof window !== "undefined") { - fragmentRef.current = document.createDocumentFragment() + fragmentRef.current = document.createDocumentFragment(); } if (!context.open) { return fragmentRef.current ? createPortal({children}, fragmentRef.current) - : null + : null; } return ( - ) -}) + ); +}); type MultiSelectItemProps = ComponentPropsWithoutRef & Partial & { - onSelect?: (value: string, item: MultiSelectOptionItem) => void - onDeselect?: (value: string, item: MultiSelectOptionItem) => void - } + onSelect?: (value: string, item: MultiSelectOptionItem) => void; + onDeselect?: (value: string, item: MultiSelectOptionItem) => void; + }; const MultiSelectItem = React.forwardRef< React.ElementRef, @@ -443,7 +438,7 @@ const MultiSelectItem = React.forwardRef< onSelect, onDeselect, itemCache, - } = useMultiSelect() + } = useMultiSelect(); const item = React.useMemo(() => { return value @@ -452,31 +447,31 @@ const MultiSelectItem = React.forwardRef< label: label || (typeof children === "string" ? children : undefined), } - : undefined - }, [value, label, children]) + : undefined; + }, [value, label, children]); - const selected = Boolean(value && contextValue.includes(value)) + const selected = Boolean(value && contextValue.includes(value)); React.useEffect(() => { if (value) { - itemCache.set(value, item!) + itemCache.set(value, item!); } - }, [selected, value, item]) + }, [selected, value, item]); const disabled = Boolean( disabledProp || (!selected && maxCount && contextValue.length >= maxCount) - ) + ); const handleClick = () => { if (selected) { - onDeselectProp?.(value!, item!) - onDeselect(value!, item!) + onDeselectProp?.(value!, item!); + onDeselect(value!, item!); } else { - itemCache.set(value!, item!) - onSelectProp?.(value!, item!) - onSelect(value!, item!) + itemCache.set(value!, item!); + onSelectProp?.(value!, item!); + onSelect(value!, item!); } - } + }; return ( - + {children || label || value} - {selected ? : null} + {selected ? : null} - ) + ); } -) +); const MultiSelectGroup = React.forwardRef< React.ElementRef, ComponentPropsWithoutRef >((props, forwardRef) => { - return -}) + return ; +}); -MultiSelectGroup.displayName = "MultiSelectGroup" +MultiSelectGroup.displayName = "MultiSelectGroup"; const MultiSelectSeparator = React.forwardRef< React.ElementRef, ComponentPropsWithoutRef >((props, forwardRef) => { - return -}) + return ; +}); -MultiSelectSeparator.displayName = "MultiSelectSeparator" +MultiSelectSeparator.displayName = "MultiSelectSeparator"; const MultiSelectEmpty = React.forwardRef< React.ElementRef, @@ -525,19 +520,19 @@ const MultiSelectEmpty = React.forwardRef< {children} - ) -}) + ); +}); -MultiSelectEmpty.displayName = "MultiSelectEmpty" +MultiSelectEmpty.displayName = "MultiSelectEmpty"; export interface MultiSelectOptionSeparator { - type: "separator" + type: "separator"; } export interface MultiSelectOptionGroup { - heading?: React.ReactNode - value?: string - children: MultiSelectOption[] + heading?: React.ReactNode; + value?: string; + children: MultiSelectOption[]; } export type MultiSelectOption = @@ -546,16 +541,16 @@ export type MultiSelectOption = "value" | "label" | "disabled" | "onSelect" | "onDeselect" > | MultiSelectOptionSeparator - | MultiSelectOptionGroup + | MultiSelectOptionGroup; const renderMultiSelectOptions = (list: MultiSelectOption[]) => { return list.map((option, index) => { if ("type" in option) { if (option.type === "separator") { - return + return ; } - return null + return null; } if ("children" in option) { @@ -567,16 +562,16 @@ const renderMultiSelectOptions = (list: MultiSelectOption[]) => { > {renderMultiSelectOptions(option.children)} - ) + ); } return ( {option.label} - ) - }) -} + ); + }); +}; export { MultiSelect, @@ -590,4 +585,4 @@ export { MultiSelectSeparator, MultiSelectEmpty, renderMultiSelectOptions, -} +}; diff --git a/src/shadcn/ui/navigation-menu.tsx b/src/shadcn/ui/navigation-menu.tsx index e4fc352..90be5c5 100644 --- a/src/shadcn/ui/navigation-menu.tsx +++ b/src/shadcn/ui/navigation-menu.tsx @@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; const NavigationMenuItem = NavigationMenuPrimitive.Item; const navigationMenuTriggerStyle = cva( - "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" + "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" ); const NavigationMenuTrigger = React.forwardRef< @@ -57,8 +57,8 @@ const NavigationMenuTrigger = React.forwardRef< > {children}{" "}