diff options
Diffstat (limited to 'src/lib/shadcn/components')
6 files changed, 96 insertions, 0 deletions
diff --git a/src/lib/shadcn/components/ui/accordion/accordion-content.svelte b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte new file mode 100644 index 00000000..14328e88 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte @@ -0,0 +1,22 @@ +<script> + import { Accordion as AccordionPrimitive } from "bits-ui"; + import { cn } from "$lib/shadcn/utils"; + import { slide } from "svelte/transition"; + let className = undefined; + export let transition = slide; + export let transitionConfig = { + duration: 200, + }; + export { className as class }; +</script> + +<AccordionPrimitive.Content + class={cn("overflow-hidden text-sm transition-all", className)} + {transition} + {transitionConfig} + {...$$restProps} +> + <div class="pb-4 pt-0"> + <slot /> + </div> +</AccordionPrimitive.Content> diff --git a/src/lib/shadcn/components/ui/accordion/accordion-item.svelte b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte new file mode 100644 index 00000000..b0887d7e --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte @@ -0,0 +1,11 @@ +<script> + import { Accordion as AccordionPrimitive } from "bits-ui"; + import { cn } from "$lib/shadcn/utils"; + let className = undefined; + export let value; + export { className as class }; +</script> + +<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}> + <slot /> +</AccordionPrimitive.Item> diff --git a/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte new file mode 100644 index 00000000..8acf4675 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte @@ -0,0 +1,22 @@ +<script> + import { Accordion as AccordionPrimitive } from "bits-ui"; + import { ChevronDown } from "lucide-svelte"; + import { cn } from "$lib/shadcn/utils"; + let className = undefined; + export let level = 3; + export { className as class }; +</script> + +<AccordionPrimitive.Header {level} class="flex"> + <AccordionPrimitive.Trigger + class={cn( + "flex flex-1 items-center justify-between py-2 font-medium transition-all [&[data-state=open]>svg]:rotate-180", + className + )} + {...$$restProps} + on:click + > + <slot /> + <ChevronDown class="h-4 w-4 transition-transform duration-200" /> + </AccordionPrimitive.Trigger> +</AccordionPrimitive.Header> diff --git a/src/lib/shadcn/components/ui/accordion/index.js b/src/lib/shadcn/components/ui/accordion/index.js new file mode 100644 index 00000000..d75ea273 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/index.js @@ -0,0 +1,16 @@ +import { Accordion as AccordionPrimitive } from "bits-ui"; +import Content from "./accordion-content.svelte"; +import Item from "./accordion-item.svelte"; +import Trigger from "./accordion-trigger.svelte"; +const Root = AccordionPrimitive.Root; +export { + Root, + Content, + Item, + Trigger, + // + Root as Accordion, + Content as AccordionContent, + Item as AccordionItem, + Trigger as AccordionTrigger, +}; diff --git a/src/lib/shadcn/components/ui/separator/index.js b/src/lib/shadcn/components/ui/separator/index.js new file mode 100644 index 00000000..073c5c4c --- /dev/null +++ b/src/lib/shadcn/components/ui/separator/index.js @@ -0,0 +1,6 @@ +import Root from "./separator.svelte"; +export { + Root, + // + Root as Separator, +}; diff --git a/src/lib/shadcn/components/ui/separator/separator.svelte b/src/lib/shadcn/components/ui/separator/separator.svelte new file mode 100644 index 00000000..b07c93ea --- /dev/null +++ b/src/lib/shadcn/components/ui/separator/separator.svelte @@ -0,0 +1,19 @@ +<script> + import { Separator as SeparatorPrimitive } from "bits-ui"; + import { cn } from "$lib/shadcn/utils"; + let className = undefined; + export let orientation = "horizontal"; + export let decorative = undefined; + export { className as class }; +</script> + +<SeparatorPrimitive.Root + class={cn( + "shrink-0 bg-border", + orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", + className + )} + {orientation} + {decorative} + {...$$restProps} +/> |