diff options
Diffstat (limited to 'packages/ui')
| -rw-r--r-- | packages/ui/components/icons.tsx | 4 | ||||
| -rw-r--r-- | packages/ui/icons/index.ts | 8 | ||||
| -rw-r--r-- | packages/ui/icons/nextarrow.svg | 3 | ||||
| -rw-r--r-- | packages/ui/icons/search.svg | 3 | ||||
| -rw-r--r-- | packages/ui/icons/url.svg | 4 | ||||
| -rw-r--r-- | packages/ui/shadcn/accordion.tsx | 54 | ||||
| -rw-r--r-- | packages/ui/shadcn/select.tsx | 160 | ||||
| -rw-r--r-- | packages/ui/shadcn/separator.tsx | 21 | ||||
| -rw-r--r-- | packages/ui/shadcn/sonner.tsx | 31 | ||||
| -rw-r--r-- | packages/ui/shadcn/tabs.tsx | 42 | ||||
| -rw-r--r-- | packages/ui/shadcn/textarea.tsx | 24 |
11 files changed, 351 insertions, 3 deletions
diff --git a/packages/ui/components/icons.tsx b/packages/ui/components/icons.tsx index d72c8e1f..134a2a96 100644 --- a/packages/ui/components/icons.tsx +++ b/packages/ui/components/icons.tsx @@ -277,8 +277,8 @@ export const X = (props: SVGProps<SVGSVGElement>) => ( export const Google = (props: SVGProps<SVGSVGElement>) => ( <svg - width="1em" - height="1em" + width="1.5em" + height="1.5em" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" diff --git a/packages/ui/icons/index.ts b/packages/ui/icons/index.ts index 6c528aba..7788c20f 100644 --- a/packages/ui/icons/index.ts +++ b/packages/ui/icons/index.ts @@ -3,8 +3,11 @@ import ChatIcon from "./chat.svg"; import HistoryIcon from "./history.svg"; import ExploreIcon from "./explore.svg"; import MemoriesIcon from "./memories.svg"; -import ArrowRightIcon from "./arrowRight.svg"; +import ArrowRightIcon from "./arrowright.svg"; import SelectIcon from "./select.svg"; +import SearchIcon from "./search.svg"; +import NextIcon from "./nextarrow.svg"; +import UrlIcon from "./url.svg"; export { AddIcon, @@ -14,4 +17,7 @@ export { MemoriesIcon, ArrowRightIcon, SelectIcon, + SearchIcon, + NextIcon, + UrlIcon }; diff --git a/packages/ui/icons/nextarrow.svg b/packages/ui/icons/nextarrow.svg new file mode 100644 index 00000000..b0f4a5fe --- /dev/null +++ b/packages/ui/icons/nextarrow.svg @@ -0,0 +1,3 @@ +<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M1.1875 1.375L6.8125 7L1.1875 12.625" stroke="#B3BCC5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/packages/ui/icons/search.svg b/packages/ui/icons/search.svg new file mode 100644 index 00000000..af8b6664 --- /dev/null +++ b/packages/ui/icons/search.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M14.75 14.7501L10.8523 10.8523M10.8523 10.8523C11.9072 9.79742 12.4998 8.36662 12.4998 6.87472C12.4998 5.38282 11.9072 3.95203 10.8523 2.8971C9.79732 1.84217 8.36653 1.24951 6.87463 1.24951C5.38273 1.24951 3.95194 1.84217 2.89701 2.8971C1.84207 3.95203 1.24942 5.38282 1.24942 6.87472C1.24942 8.36662 1.84207 9.79742 2.89701 10.8523C3.95194 11.9073 5.38273 12.4999 6.87463 12.4999C8.36653 12.4999 9.79732 11.9073 10.8523 10.8523Z" stroke="#687077" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/packages/ui/icons/url.svg b/packages/ui/icons/url.svg new file mode 100644 index 00000000..65084459 --- /dev/null +++ b/packages/ui/icons/url.svg @@ -0,0 +1,4 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M9.89249 6.51602C10.3799 6.74871 10.8043 7.09497 11.1301 7.5257C11.4559 7.95643 11.6735 8.45906 11.7648 8.99136C11.8561 9.52367 11.8183 10.0701 11.6546 10.5848C11.4908 11.0994 11.206 11.5673 10.824 11.949L7.44899 15.324C6.81605 15.957 5.9576 16.3125 5.06249 16.3125C4.16738 16.3125 3.30893 15.957 2.67599 15.324C2.04305 14.6911 1.68747 13.8326 1.68747 12.9375C1.68747 12.0424 2.04305 11.184 2.67599 10.551L3.99374 9.23327M14.0062 8.76677L15.324 7.44902C15.9569 6.81608 16.3125 5.95763 16.3125 5.06252C16.3125 4.16741 15.9569 3.30896 15.324 2.67602C14.6911 2.04308 13.8326 1.6875 12.9375 1.6875C12.0424 1.6875 11.1839 2.04308 10.551 2.67602L7.17599 6.05102C6.79397 6.43277 6.50914 6.90063 6.34543 7.41529C6.18172 7.92995 6.1439 8.47638 6.23517 9.00868C6.32643 9.54098 6.54411 10.0436 6.86991 10.4743C7.19571 10.9051 7.62012 11.2513 8.10749 11.484" stroke="#B3BCC5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> + diff --git a/packages/ui/shadcn/accordion.tsx b/packages/ui/shadcn/accordion.tsx new file mode 100644 index 00000000..a5dedb19 --- /dev/null +++ b/packages/ui/shadcn/accordion.tsx @@ -0,0 +1,54 @@ +"use client"; + +import * as React from "react"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDown } from "lucide-react"; + +import { cn } from "@repo/ui/lib/utils"; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef<typeof AccordionPrimitive.Item>, + React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> +>(({ className, ...props }, ref) => ( + <AccordionPrimitive.Item ref={ref} className={cn(className)} {...props} /> +)); +AccordionItem.displayName = "AccordionItem"; + +const AccordionTrigger = React.forwardRef< + React.ElementRef<typeof AccordionPrimitive.Trigger>, + React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> +>(({ className, children, ...props }, ref) => ( + <AccordionPrimitive.Header className="flex"> + <AccordionPrimitive.Trigger + ref={ref} + className={cn( + "flex flex-1 items-center gap-2 py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", + className, + )} + {...props} + > + {children} + <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" /> + </AccordionPrimitive.Trigger> + </AccordionPrimitive.Header> +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef<typeof AccordionPrimitive.Content>, + React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> +>(({ className, children, ...props }, ref) => ( + <AccordionPrimitive.Content + ref={ref} + className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" + {...props} + > + <div className={cn("pb-4 pt-0", className)}>{children}</div> + </AccordionPrimitive.Content> +)); + +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/packages/ui/shadcn/select.tsx b/packages/ui/shadcn/select.tsx new file mode 100644 index 00000000..8abe27c1 --- /dev/null +++ b/packages/ui/shadcn/select.tsx @@ -0,0 +1,160 @@ +"use client"; + +import * as React from "react"; +import * as SelectPrimitive from "@radix-ui/react-select"; +import { Check, ChevronDown, ChevronUp } from "lucide-react"; + +import { cn } from "@repo/ui/lib/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-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", + className, + )} + {...props} + > + {children} + <SelectPrimitive.Icon asChild> + <ChevronDown className="h-4 w-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="h-4 w-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="h-4 w-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( + "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md text-popover-foreground shadow-md 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", + 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:bg-foreground-menu data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + className, + )} + {...props} + > + <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> + <SelectPrimitive.ItemIndicator> + <Check className="h-4 w-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-muted", className)} + {...props} + /> +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +}; diff --git a/packages/ui/shadcn/separator.tsx b/packages/ui/shadcn/separator.tsx new file mode 100644 index 00000000..d956f2f0 --- /dev/null +++ b/packages/ui/shadcn/separator.tsx @@ -0,0 +1,21 @@ +"use client"; + +import * as React from "react"; +import * as SeparatorPrimitive from "@radix-ui/react-separator"; +import { cn } from "@repo/ui/lib/utils"; + +const Separator = React.forwardRef< + React.ElementRef<typeof SeparatorPrimitive.Root>, + React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> +>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( + <SeparatorPrimitive.Root + ref={ref} + decorative={decorative} + orientation={orientation} + className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : " w-[1px]", className)} + {...props} + /> +)); +Separator.displayName = SeparatorPrimitive.Root.displayName; + +export { Separator }; diff --git a/packages/ui/shadcn/sonner.tsx b/packages/ui/shadcn/sonner.tsx new file mode 100644 index 00000000..549cf841 --- /dev/null +++ b/packages/ui/shadcn/sonner.tsx @@ -0,0 +1,31 @@ +"use client"; + +import { useTheme } from "next-themes"; +import { Toaster as Sonner } from "sonner"; + +type ToasterProps = React.ComponentProps<typeof Sonner>; + +const Toaster = ({ ...props }: ToasterProps) => { + const { theme = "system" } = useTheme(); + + return ( + <Sonner + theme={theme as ToasterProps["theme"]} + className="toaster group" + toastOptions={{ + classNames: { + toast: + "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg", + description: "group-[.toast]:text-muted-foreground", + actionButton: + "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground", + cancelButton: + "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground", + }, + }} + {...props} + /> + ); +}; + +export { Toaster }; diff --git a/packages/ui/shadcn/tabs.tsx b/packages/ui/shadcn/tabs.tsx index aad81ef8..75d8d2ee 100644 --- a/packages/ui/shadcn/tabs.tsx +++ b/packages/ui/shadcn/tabs.tsx @@ -1,3 +1,4 @@ +<<<<<<< HEAD "use client"; import * as React from "react"; @@ -6,6 +7,16 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"; import { cn } from "@repo/ui/lib/utils"; const Tabs = TabsPrimitive.Root; +======= +"use client" + +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" + +import { cn } from "@repo/ui/lib/utils"; + +const Tabs = TabsPrimitive.Root +>>>>>>> origin/codetorso const TabsList = React.forwardRef< React.ElementRef<typeof TabsPrimitive.List>, @@ -14,6 +25,7 @@ const TabsList = React.forwardRef< <TabsPrimitive.List ref={ref} className={cn( +<<<<<<< HEAD "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground", className, )} @@ -21,6 +33,15 @@ const TabsList = React.forwardRef< /> )); TabsList.displayName = TabsPrimitive.List.displayName; +======= + "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", + className + )} + {...props} + /> +)) +TabsList.displayName = TabsPrimitive.List.displayName +>>>>>>> origin/codetorso const TabsTrigger = React.forwardRef< React.ElementRef<typeof TabsPrimitive.Trigger>, @@ -29,6 +50,7 @@ const TabsTrigger = React.forwardRef< <TabsPrimitive.Trigger ref={ref} className={cn( +<<<<<<< HEAD "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className, )} @@ -36,6 +58,15 @@ const TabsTrigger = React.forwardRef< /> )); TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; +======= + "inline-flex items-center justify-center whitespace-nowrap rounded-xl px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#2B3237] data-[state=active]:text-[#858B92] data-[state=active]:shadow-sm", + className + )} + {...props} + /> +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName +>>>>>>> origin/codetorso const TabsContent = React.forwardRef< React.ElementRef<typeof TabsPrimitive.Content>, @@ -45,6 +76,7 @@ const TabsContent = React.forwardRef< ref={ref} className={cn( "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", +<<<<<<< HEAD className, )} {...props} @@ -53,3 +85,13 @@ const TabsContent = React.forwardRef< TabsContent.displayName = TabsPrimitive.Content.displayName; export { Tabs, TabsList, TabsTrigger, TabsContent }; +======= + className + )} + {...props} + /> +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } +>>>>>>> origin/codetorso diff --git a/packages/ui/shadcn/textarea.tsx b/packages/ui/shadcn/textarea.tsx new file mode 100644 index 00000000..30ce2800 --- /dev/null +++ b/packages/ui/shadcn/textarea.tsx @@ -0,0 +1,24 @@ +import * as React from "react" + +import { cn } from "@repo/ui/lib/utils"; + +export interface TextareaProps + extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} + +const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( + ({ className, ...props }, ref) => { + return ( + <textarea + className={cn( + "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", + className + )} + ref={ref} + {...props} + /> + ) + } +) +Textarea.displayName = "Textarea" + +export { Textarea } |