-
Notifications
You must be signed in to change notification settings - Fork 21
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
9 changed files
with
397 additions
and
23 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import type { Component } from "solid-js" | ||
| import { splitProps } from "solid-js" | ||
|
|
||
| import { Combobox as ComboboxPrimitive } from "@kobalte/core" | ||
| import { TbCheck, TbSelector } from "solid-icons/tb" | ||
|
|
||
| import { cn } from "~/lib/utils" | ||
|
|
||
| const Combobox = ComboboxPrimitive.Root | ||
|
|
||
| const ComboboxItem: Component<ComboboxPrimitive.ComboboxItemProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class"]) | ||
| return ( | ||
| <ComboboxPrimitive.Item | ||
| class={cn( | ||
| "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const ComboboxItemLabel = ComboboxPrimitive.ItemLabel | ||
|
|
||
| const ComboboxItemIndicator: Component<ComboboxPrimitive.ComboboxItemIndicatorProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["children"]) | ||
| return ( | ||
| <ComboboxPrimitive.ItemIndicator {...rest}> | ||
| {props.children ?? <TbCheck />} | ||
| </ComboboxPrimitive.ItemIndicator> | ||
| ) | ||
| } | ||
|
|
||
| const ComboboxSection: Component<ComboboxPrimitive.ComboboxSectionProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class"]) | ||
| return ( | ||
| <ComboboxPrimitive.Section | ||
| class={cn( | ||
| "text-muted-foreground overflow-hidden p-1 px-2 py-1.5 text-xs font-medium ", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| // due to the generic typing this needs to be a function | ||
| function ComboboxControl<T>(props: ComboboxPrimitive.ComboboxControlProps<T>) { | ||
| const [, rest] = splitProps(props, ["class"]) | ||
| return ( | ||
| <ComboboxPrimitive.Control | ||
| class={cn("flex items-center rounded-md border px-3", props.class)} | ||
| {...rest} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const ComboboxInput: Component<ComboboxPrimitive.ComboboxInputProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class"]) | ||
| return ( | ||
| <ComboboxPrimitive.Input | ||
| class={cn( | ||
| "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect | ||
|
|
||
| const ComboboxTrigger: Component<ComboboxPrimitive.ComboboxTriggerProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class", "children"]) | ||
| return ( | ||
| <ComboboxPrimitive.Trigger class={cn("h-4 w-4 opacity-50", props.class)} {...rest}> | ||
| <ComboboxPrimitive.Icon>{props.children ?? <TbSelector />}</ComboboxPrimitive.Icon> | ||
| </ComboboxPrimitive.Trigger> | ||
| ) | ||
| } | ||
|
|
||
| const ComboboxContent: Component<ComboboxPrimitive.ComboboxContentProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class"]) | ||
| return ( | ||
| <ComboboxPrimitive.Portal> | ||
| <ComboboxPrimitive.Content | ||
| class={cn( | ||
| "bg-popover text-popover-foreground animate-in fade-in-80 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| > | ||
| <ComboboxPrimitive.Listbox class="m-0 p-1" /> | ||
| </ComboboxPrimitive.Content> | ||
| </ComboboxPrimitive.Portal> | ||
| ) | ||
| } | ||
|
|
||
| export { | ||
| Combobox, | ||
| ComboboxItem, | ||
| ComboboxItemLabel, | ||
| ComboboxItemIndicator, | ||
| ComboboxSection, | ||
| ComboboxControl, | ||
| ComboboxTrigger, | ||
| ComboboxInput, | ||
| ComboboxHiddenSelect, | ||
| ComboboxContent | ||
| } |
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,29 @@ | ||
| import type { Component } from "solid-js" | ||
| import { splitProps } from "solid-js" | ||
|
|
||
| import { HoverCard as HoverCardPrimitive } from "@kobalte/core" | ||
|
|
||
| import { cn } from "~/lib/utils" | ||
|
|
||
| const HoverCard: Component<HoverCardPrimitive.HoverCardRootProps> = (props) => { | ||
| return <HoverCardPrimitive.Root gutter={4} {...props} /> | ||
| } | ||
|
|
||
| const HoverCardTrigger = HoverCardPrimitive.Trigger | ||
|
|
||
| const HoverCardContent: Component<HoverCardPrimitive.HoverCardContentProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class"]) | ||
| return ( | ||
| <HoverCardPrimitive.Portal> | ||
| <HoverCardPrimitive.Content | ||
| class={cn( | ||
| "bg-popover text-popover-foreground 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 z-50 w-64 rounded-md border p-4 shadow-md outline-none", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| /> | ||
| </HoverCardPrimitive.Portal> | ||
| ) | ||
| } | ||
|
|
||
| export { HoverCard, HoverCardTrigger, HoverCardContent } |
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,68 @@ | ||
| import type { Component } from "solid-js" | ||
| import { splitProps } from "solid-js" | ||
|
|
||
| import { Select as SelectPrimitive } from "@kobalte/core" | ||
| import { TbCheck, TbChevronDown } from "solid-icons/tb" | ||
|
|
||
| import { cn } from "~/lib/utils" | ||
|
|
||
| const Select = SelectPrimitive.Root | ||
|
|
||
| const SelectValue = SelectPrimitive.Value | ||
|
|
||
| const SelectTrigger: Component<SelectPrimitive.SelectTriggerProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class", "children"]) | ||
| return ( | ||
| <SelectPrimitive.Trigger | ||
| class={cn( | ||
| "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| > | ||
| {props.children} | ||
| <SelectPrimitive.Icon> | ||
| <TbChevronDown class="h-4 w-4 opacity-50" /> | ||
| </SelectPrimitive.Icon> | ||
| </SelectPrimitive.Trigger> | ||
| ) | ||
| } | ||
|
|
||
| const SelectContent: Component<SelectPrimitive.SelectContentProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class"]) | ||
| return ( | ||
| <SelectPrimitive.Portal> | ||
| <SelectPrimitive.Content | ||
| class={cn( | ||
| "bg-popover text-popover-foreground animate-in fade-in-80 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| > | ||
| <SelectPrimitive.Listbox class="m-0 p-1" /> | ||
| </SelectPrimitive.Content> | ||
| </SelectPrimitive.Portal> | ||
| ) | ||
| } | ||
|
|
||
| const SelectItem: Component<SelectPrimitive.SelectItemProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["class", "children"]) | ||
| return ( | ||
| <SelectPrimitive.Item | ||
| class={cn( | ||
| "focus:bg-accent focus:text-accent-foreground relative mt-0 flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", | ||
| props.class | ||
| )} | ||
| {...rest} | ||
| > | ||
| <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> | ||
| <SelectPrimitive.ItemIndicator> | ||
| <TbCheck class="h-4 w-4" /> | ||
| </SelectPrimitive.ItemIndicator> | ||
| </span> | ||
| <SelectPrimitive.ItemLabel>{props.children}</SelectPrimitive.ItemLabel> | ||
| </SelectPrimitive.Item> | ||
| ) | ||
| } | ||
|
|
||
| export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem } |
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 |
|---|---|---|
|
|
@@ -2,6 +2,8 @@ | |
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
|
|
||
|
|
||
| @layer base { | ||
| :root { | ||
| --background: 0 0% 100%; | ||
|
|
||
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.