This commit is contained in:
Fractal-Tess
2024-01-24 04:32:08 +02:00
parent 559d5e54a5
commit ebec1ab8ea
215 changed files with 1871 additions and 1714 deletions

View File

@@ -1,23 +1,24 @@
<script lang="ts"> <script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui'; import { Accordion as AccordionPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition'
type $$Props = AccordionPrimitive.ContentProps; type $$Props = AccordionPrimitive.ContentProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = slide; export let transition: $$Props['transition'] = slide
export let transitionConfig: $$Props['transitionConfig'] = { export let transitionConfig: $$Props['transitionConfig'] = {
duration: 200 duration: 200
}; }
export { className as class }; export { className as class }
</script> </script>
<AccordionPrimitive.Content <AccordionPrimitive.Content
class={cn('overflow-hidden text-sm transition-all', className)} class={cn('overflow-hidden text-sm transition-all', className)}
{transition} {transition}
{transitionConfig} {transitionConfig}
{...$$restProps}> {...$$restProps}
>
<div class="pb-4 pt-0"> <div class="pb-4 pt-0">
<slot /> <slot />
</div> </div>

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui'; import { Accordion as AccordionPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AccordionPrimitive.ItemProps; type $$Props = AccordionPrimitive.ItemProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let value: $$Props['value']; export let value: $$Props['value']
export { className as class }; export { className as class }
</script> </script>
<AccordionPrimitive.Item <AccordionPrimitive.Item
{value} {value}
class={cn('border-b', className)} class={cn('border-b', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</AccordionPrimitive.Item> </AccordionPrimitive.Item>

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui'; import { Accordion as AccordionPrimitive } from 'bits-ui'
import { ChevronDown } from 'lucide-svelte'; import { ChevronDown } from 'lucide-svelte'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AccordionPrimitive.TriggerProps; type $$Props = AccordionPrimitive.TriggerProps
type $$Events = AccordionPrimitive.TriggerEvents; type $$Events = AccordionPrimitive.TriggerEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let level: AccordionPrimitive.HeaderProps['level'] = 3; export let level: AccordionPrimitive.HeaderProps['level'] = 3
export { className as class }; export { className as class }
</script> </script>
<AccordionPrimitive.Header {level} class="flex"> <AccordionPrimitive.Header {level} class="flex">
@@ -18,7 +18,8 @@
className className
)} )}
{...$$restProps} {...$$restProps}
on:click> on:click
>
<slot /> <slot />
<ChevronDown class="h-4 w-4 transition-transform duration-200" /> <ChevronDown class="h-4 w-4 transition-transform duration-200" />
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>

View File

@@ -1,8 +1,8 @@
import { Accordion as AccordionPrimitive } from 'bits-ui'; import { Accordion as AccordionPrimitive } from 'bits-ui'
import Content from './accordion-content.svelte'; import Content from './accordion-content.svelte'
import Item from './accordion-item.svelte'; import Item from './accordion-item.svelte'
import Trigger from './accordion-trigger.svelte'; import Trigger from './accordion-trigger.svelte'
const Root = AccordionPrimitive.Root; const Root = AccordionPrimitive.Root
export { export {
Root, Root,
@@ -14,4 +14,4 @@ export {
Content as AccordionContent, Content as AccordionContent,
Item as AccordionItem, Item as AccordionItem,
Trigger as AccordionTrigger Trigger as AccordionTrigger
}; }

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { buttonVariants } from '$lib/components/ui/button'; import { buttonVariants } from '$lib/components/ui/button'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AlertDialogPrimitive.ActionProps; type $$Props = AlertDialogPrimitive.ActionProps
type $$Events = AlertDialogPrimitive.ActionEvents; type $$Events = AlertDialogPrimitive.ActionEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AlertDialogPrimitive.Action <AlertDialogPrimitive.Action
@@ -15,6 +15,7 @@
{...$$restProps} {...$$restProps}
on:click on:click
on:keydown on:keydown
let:builder> let:builder
>
<slot {builder} /> <slot {builder} />
</AlertDialogPrimitive.Action> </AlertDialogPrimitive.Action>

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { buttonVariants } from '$lib/components/ui/button'; import { buttonVariants } from '$lib/components/ui/button'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AlertDialogPrimitive.CancelProps; type $$Props = AlertDialogPrimitive.CancelProps
type $$Events = AlertDialogPrimitive.CancelEvents; type $$Events = AlertDialogPrimitive.CancelEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
@@ -15,6 +15,7 @@
{...$$restProps} {...$$restProps}
on:click on:click
on:keydown on:keydown
let:builder> let:builder
>
<slot {builder} /> <slot {builder} />
</AlertDialogPrimitive.Cancel> </AlertDialogPrimitive.Cancel>

View File

@@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import * as AlertDialog from '.'; import * as AlertDialog from '.'
import { cn, flyAndScale } from '$lib/utils'; import { cn, flyAndScale } from '$lib/utils'
type $$Props = AlertDialogPrimitive.ContentProps; type $$Props = AlertDialogPrimitive.ContentProps
export let transition: $$Props['transition'] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = undefined; export let transitionConfig: $$Props['transitionConfig'] = undefined
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AlertDialog.Portal> <AlertDialog.Portal>
@@ -21,7 +21,8 @@
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full', 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</AlertDialogPrimitive.Content> </AlertDialogPrimitive.Content>
</AlertDialog.Portal> </AlertDialog.Portal>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AlertDialogPrimitive.DescriptionProps; type $$Props = AlertDialogPrimitive.DescriptionProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AlertDialogPrimitive.Description <AlertDialogPrimitive.Description
class={cn('text-sm text-muted-foreground', className)} class={cn('text-sm text-muted-foreground', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</AlertDialogPrimitive.Description> </AlertDialogPrimitive.Description>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
@@ -13,6 +13,7 @@
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} class={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,20 +1,21 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition'
type $$Props = AlertDialogPrimitive.OverlayProps; type $$Props = AlertDialogPrimitive.OverlayProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = fade; export let transition: $$Props['transition'] = fade
export let transitionConfig: $$Props['transitionConfig'] = { export let transitionConfig: $$Props['transitionConfig'] = {
duration: 150 duration: 150
}; }
export { className as class }; export { className as class }
</script> </script>
<AlertDialogPrimitive.Overlay <AlertDialogPrimitive.Overlay
{transition} {transition}
{transitionConfig} {transitionConfig}
class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)} class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
{...$$restProps} /> {...$$restProps}
/>

View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
type $$Props = AlertDialogPrimitive.PortalProps; type $$Props = AlertDialogPrimitive.PortalProps
</script> </script>
<AlertDialogPrimitive.Portal {...$$restProps}> <AlertDialogPrimitive.Portal {...$$restProps}>

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AlertDialogPrimitive.TitleProps; type $$Props = AlertDialogPrimitive.TitleProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let level: $$Props['level'] = 'h3'; export let level: $$Props['level'] = 'h3'
export { className as class }; export { className as class }
</script> </script>
<AlertDialogPrimitive.Title <AlertDialogPrimitive.Title
class={cn('text-lg font-semibold', className)} class={cn('text-lg font-semibold', className)}
{level} {level}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</AlertDialogPrimitive.Title> </AlertDialogPrimitive.Title>

View File

@@ -1,17 +1,17 @@
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
const Root = AlertDialogPrimitive.Root; const Root = AlertDialogPrimitive.Root
const Trigger = AlertDialogPrimitive.Trigger; const Trigger = AlertDialogPrimitive.Trigger
import Title from './alert-dialog-title.svelte'; import Title from './alert-dialog-title.svelte'
import Action from './alert-dialog-action.svelte'; import Action from './alert-dialog-action.svelte'
import Cancel from './alert-dialog-cancel.svelte'; import Cancel from './alert-dialog-cancel.svelte'
import Portal from './alert-dialog-portal.svelte'; import Portal from './alert-dialog-portal.svelte'
import Footer from './alert-dialog-footer.svelte'; import Footer from './alert-dialog-footer.svelte'
import Header from './alert-dialog-header.svelte'; import Header from './alert-dialog-header.svelte'
import Overlay from './alert-dialog-overlay.svelte'; import Overlay from './alert-dialog-overlay.svelte'
import Content from './alert-dialog-content.svelte'; import Content from './alert-dialog-content.svelte'
import Description from './alert-dialog-description.svelte'; import Description from './alert-dialog-description.svelte'
export { export {
Root, Root,
@@ -37,4 +37,4 @@ export {
Overlay as AlertDialogOverlay, Overlay as AlertDialogOverlay,
Content as AlertDialogContent, Content as AlertDialogContent,
Description as AlertDialogDescription Description as AlertDialogDescription
}; }

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}> <div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>

View File

@@ -1,20 +1,21 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import type { HeadingLevel } from '.'; import type { HeadingLevel } from '.'
type $$Props = HTMLAttributes<HTMLHeadingElement> & { type $$Props = HTMLAttributes<HTMLHeadingElement> & {
level?: HeadingLevel; level?: HeadingLevel
}; }
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let level: $$Props['level'] = 'h5'; export let level: $$Props['level'] = 'h5'
export { className as class }; export { className as class }
</script> </script>
<svelte:element <svelte:element
this={level} this={level}
class={cn('mb-1 font-medium leading-none tracking-tight', className)} class={cn('mb-1 font-medium leading-none tracking-tight', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</svelte:element> </svelte:element>

View File

@@ -1,20 +1,21 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { alertVariants, type Variant } from '.'; import { alertVariants, type Variant } from '.'
type $$Props = HTMLAttributes<HTMLDivElement> & { type $$Props = HTMLAttributes<HTMLDivElement> & {
variant?: Variant; variant?: Variant
}; }
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let variant: $$Props['variant'] = 'default'; export let variant: $$Props['variant'] = 'default'
export { className as class }; export { className as class }
</script> </script>
<div <div
class={cn(alertVariants({ variant }), className)} class={cn(alertVariants({ variant }), className)}
{...$$restProps} {...$$restProps}
role="alert"> role="alert"
>
<slot /> <slot />
</div> </div>

View File

@@ -1,8 +1,8 @@
import { tv, type VariantProps } from 'tailwind-variants'; import { tv, type VariantProps } from 'tailwind-variants'
import Root from './alert.svelte'; import Root from './alert.svelte'
import Description from './alert-description.svelte'; import Description from './alert-description.svelte'
import Title from './alert-title.svelte'; import Title from './alert-title.svelte'
export const alertVariants = tv({ export const alertVariants = tv({
base: 'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11', base: 'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11',
@@ -17,10 +17,10 @@ export const alertVariants = tv({
defaultVariants: { defaultVariants: {
variant: 'default' variant: 'default'
} }
}); })
export type Variant = VariantProps<typeof alertVariants>['variant']; export type Variant = VariantProps<typeof alertVariants>['variant']
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
export { export {
Root, Root,
@@ -30,4 +30,4 @@ export {
Root as Alert, Root as Alert,
Description as AlertDescription, Description as AlertDescription,
Title as AlertTitle Title as AlertTitle
}; }

View File

@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { AspectRatio as AspectRatioPrimitive } from 'bits-ui'; import { AspectRatio as AspectRatioPrimitive } from 'bits-ui'
type $$Props = AspectRatioPrimitive.Props; type $$Props = AspectRatioPrimitive.Props
export let ratio: $$Props['ratio'] = 4 / 3; export let ratio: $$Props['ratio'] = 4 / 3
</script> </script>
<AspectRatioPrimitive.Root {ratio} {...$$restProps}> <AspectRatioPrimitive.Root {ratio} {...$$restProps}>

View File

@@ -1,3 +1,3 @@
import Root from './aspect-ratio.svelte'; import Root from './aspect-ratio.svelte'
export { Root, Root as AspectRatio }; export { Root, Root as AspectRatio }

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from 'bits-ui'; import { Avatar as AvatarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AvatarPrimitive.FallbackProps; type $$Props = AvatarPrimitive.FallbackProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AvatarPrimitive.Fallback <AvatarPrimitive.Fallback
@@ -13,6 +13,7 @@
'flex h-full w-full items-center justify-center rounded-full bg-muted', 'flex h-full w-full items-center justify-center rounded-full bg-muted',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</AvatarPrimitive.Fallback> </AvatarPrimitive.Fallback>

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from 'bits-ui'; import { Avatar as AvatarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AvatarPrimitive.ImageProps; type $$Props = AvatarPrimitive.ImageProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let src: $$Props['src'] = undefined; export let src: $$Props['src'] = undefined
export let alt: $$Props['alt'] = undefined; export let alt: $$Props['alt'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AvatarPrimitive.Image <AvatarPrimitive.Image
{src} {src}
{alt} {alt}
class={cn('aspect-square h-full w-full', className)} class={cn('aspect-square h-full w-full', className)}
{...$$restProps} /> {...$$restProps}
/>

View File

@@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from 'bits-ui'; import { Avatar as AvatarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = AvatarPrimitive.Props; type $$Props = AvatarPrimitive.Props
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let delayMs: $$Props['delayMs'] = undefined; export let delayMs: $$Props['delayMs'] = undefined
export { className as class }; export { className as class }
</script> </script>
<AvatarPrimitive.Root <AvatarPrimitive.Root
@@ -15,6 +15,7 @@
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</AvatarPrimitive.Root> </AvatarPrimitive.Root>

View File

@@ -1,6 +1,6 @@
import Root from './avatar.svelte'; import Root from './avatar.svelte'
import Image from './avatar-image.svelte'; import Image from './avatar-image.svelte'
import Fallback from './avatar-fallback.svelte'; import Fallback from './avatar-fallback.svelte'
export { export {
Root, Root,
@@ -10,4 +10,4 @@ export {
Root as Avatar, Root as Avatar,
Image as AvatarImage, Image as AvatarImage,
Fallback as AvatarFallback Fallback as AvatarFallback
}; }

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { badgeVariants, type Variant } from '.'; import { badgeVariants, type Variant } from '.'
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export let href: string | undefined = undefined; export let href: string | undefined = undefined
export let variant: Variant = 'default'; export let variant: Variant = 'default'
export { className as class }; export { className as class }
</script> </script>
<svelte:element <svelte:element
this={href ? 'a' : 'span'} this={href ? 'a' : 'span'}
{href} {href}
class={cn(badgeVariants({ variant, className }))} class={cn(badgeVariants({ variant, className }))}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</svelte:element> </svelte:element>

View File

@@ -1,5 +1,5 @@
import { tv, type VariantProps } from 'tailwind-variants'; import { tv, type VariantProps } from 'tailwind-variants'
export { default as Badge } from './badge.svelte'; export { default as Badge } from './badge.svelte'
export const badgeVariants = tv({ export const badgeVariants = tv({
base: 'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2', base: 'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@@ -17,6 +17,6 @@ export const badgeVariants = tv({
defaultVariants: { defaultVariants: {
variant: 'default' variant: 'default'
} }
}); })
export type Variant = VariantProps<typeof badgeVariants>['variant']; export type Variant = VariantProps<typeof badgeVariants>['variant']

View File

@@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Button as ButtonPrimitive } from 'bits-ui'; import { Button as ButtonPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { buttonVariants, type Props, type Events } from '.'; import { buttonVariants, type Props, type Events } from '.'
type $$Props = Props; type $$Props = Props
type $$Events = Events; type $$Events = Events
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let variant: $$Props['variant'] = 'default'; export let variant: $$Props['variant'] = 'default'
export let size: $$Props['size'] = 'default'; export let size: $$Props['size'] = 'default'
export let builders: $$Props['builders'] = []; export let builders: $$Props['builders'] = []
export { className as class }; export { className as class }
</script> </script>
<ButtonPrimitive.Root <ButtonPrimitive.Root
@@ -19,6 +19,7 @@
type="button" type="button"
{...$$restProps} {...$$restProps}
on:click on:click
on:keydown> on:keydown
>
<slot /> <slot />
</ButtonPrimitive.Root> </ButtonPrimitive.Root>

View File

@@ -1,6 +1,6 @@
import Root from './button.svelte'; import Root from './button.svelte'
import { tv, type VariantProps } from 'tailwind-variants'; import { tv, type VariantProps } from 'tailwind-variants'
import type { Button as ButtonPrimitive } from 'bits-ui'; import type { Button as ButtonPrimitive } from 'bits-ui'
const buttonVariants = tv({ const buttonVariants = tv({
base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@@ -26,17 +26,17 @@ const buttonVariants = tv({
variant: 'default', variant: 'default',
size: 'default' size: 'default'
} }
}); })
type Variant = VariantProps<typeof buttonVariants>['variant']; type Variant = VariantProps<typeof buttonVariants>['variant']
type Size = VariantProps<typeof buttonVariants>['size']; type Size = VariantProps<typeof buttonVariants>['size']
type Props = ButtonPrimitive.Props & { type Props = ButtonPrimitive.Props & {
variant?: Variant; variant?: Variant
size?: Size; size?: Size
}; }
type Events = ButtonPrimitive.Events; type Events = ButtonPrimitive.Events
export { export {
Root, Root,
@@ -47,4 +47,4 @@ export {
type Props as ButtonProps, type Props as ButtonProps,
type Events as ButtonEvents, type Events as ButtonEvents,
buttonVariants buttonVariants
}; }

View File

@@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.CellProps; type $$Props = CalendarPrimitive.CellProps
export let date: $$Props['date']; export let date: $$Props['date']
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.Cell <CalendarPrimitive.Cell
@@ -15,6 +15,7 @@
'relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50', 'relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CalendarPrimitive.Cell> </CalendarPrimitive.Cell>

View File

@@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { buttonVariants } from '$lib/components/ui/button'; import { buttonVariants } from '$lib/components/ui/button'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.DayProps; type $$Props = CalendarPrimitive.DayProps
type $$Events = CalendarPrimitive.DayEvents; type $$Events = CalendarPrimitive.DayEvents
export let date: $$Props['date']; export let date: $$Props['date']
export let month: $$Props['month']; export let month: $$Props['month']
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.Day <CalendarPrimitive.Day
@@ -34,7 +34,8 @@
let:selected let:selected
let:disabled let:disabled
let:unavailable let:unavailable
let:builder> let:builder
>
<slot {selected} {disabled} {unavailable} {builder}> <slot {selected} {disabled} {unavailable} {builder}>
{date.day} {date.day}
</slot> </slot>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.GridBodyProps; type $$Props = CalendarPrimitive.GridBodyProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}> <CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.GridHeadProps; type $$Props = CalendarPrimitive.GridHeadProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}> <CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.GridRowProps; type $$Props = CalendarPrimitive.GridRowProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}> <CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.GridProps; type $$Props = CalendarPrimitive.GridProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.Grid <CalendarPrimitive.Grid
class={cn('w-full border-collapse space-y-1', className)} class={cn('w-full border-collapse space-y-1', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CalendarPrimitive.Grid> </CalendarPrimitive.Grid>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.HeadCellProps; type $$Props = CalendarPrimitive.HeadCellProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.HeadCell <CalendarPrimitive.HeadCell
@@ -13,6 +13,7 @@
'w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', 'w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CalendarPrimitive.HeadCell> </CalendarPrimitive.HeadCell>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.HeaderProps; type $$Props = CalendarPrimitive.HeaderProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.Header <CalendarPrimitive.Header
@@ -13,6 +13,7 @@
'relative flex w-full items-center justify-between pt-1', 'relative flex w-full items-center justify-between pt-1',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CalendarPrimitive.Header> </CalendarPrimitive.Header>

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.HeadingProps; type $$Props = CalendarPrimitive.HeadingProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.Heading <CalendarPrimitive.Heading
let:headingValue let:headingValue
class={cn('text-sm font-medium', className)} class={cn('text-sm font-medium', className)}
{...$$restProps}> {...$$restProps}
>
<slot {headingValue}> <slot {headingValue}>
{headingValue} {headingValue}
</slot> </slot>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
@@ -13,6 +13,7 @@
'mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0', 'mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { ChevronRight } from 'lucide-svelte'; import { ChevronRight } from 'lucide-svelte'
import { buttonVariants } from '$lib/components/ui/button'; import { buttonVariants } from '$lib/components/ui/button'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.NextButtonProps; type $$Props = CalendarPrimitive.NextButtonProps
type $$Events = CalendarPrimitive.NextButtonEvents; type $$Events = CalendarPrimitive.NextButtonEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.NextButton <CalendarPrimitive.NextButton
@@ -19,7 +19,8 @@
className className
)} )}
{...$$restProps} {...$$restProps}
let:builder> let:builder
>
<slot {builder}> <slot {builder}>
<ChevronRight class="h-4 w-4" /> <ChevronRight class="h-4 w-4" />
</slot> </slot>

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import { ChevronLeft } from 'lucide-svelte'; import { ChevronLeft } from 'lucide-svelte'
import { buttonVariants } from '$lib/components/ui/button'; import { buttonVariants } from '$lib/components/ui/button'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.PrevButtonProps; type $$Props = CalendarPrimitive.PrevButtonProps
type $$Events = CalendarPrimitive.PrevButtonEvents; type $$Events = CalendarPrimitive.PrevButtonEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.PrevButton <CalendarPrimitive.PrevButton
@@ -19,7 +19,8 @@
className className
)} )}
{...$$restProps} {...$$restProps}
let:builder> let:builder
>
<slot {builder}> <slot {builder}>
<ChevronLeft class="h-4 w-4" /> <ChevronLeft class="h-4 w-4" />
</slot> </slot>

View File

@@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from 'bits-ui'; import { Calendar as CalendarPrimitive } from 'bits-ui'
import * as Calendar from '.'; import * as Calendar from '.'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CalendarPrimitive.Props; type $$Props = CalendarPrimitive.Props
type $$Events = CalendarPrimitive.Events; type $$Events = CalendarPrimitive.Events
export let value: $$Props['value'] = undefined; export let value: $$Props['value'] = undefined
export let placeholder: $$Props['placeholder'] = undefined; export let placeholder: $$Props['placeholder'] = undefined
export let weekdayFormat: $$Props['weekdayFormat'] = 'short'; export let weekdayFormat: $$Props['weekdayFormat'] = 'short'
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<CalendarPrimitive.Root <CalendarPrimitive.Root
@@ -23,7 +23,8 @@
{...$$restProps} {...$$restProps}
on:keydown on:keydown
let:months let:months
let:weekdays> let:weekdays
>
<Calendar.Header> <Calendar.Header>
<Calendar.PrevButton /> <Calendar.PrevButton />
<Calendar.Heading /> <Calendar.Heading />

View File

@@ -1,16 +1,16 @@
import Root from './calendar.svelte'; import Root from './calendar.svelte'
import Cell from './calendar-cell.svelte'; import Cell from './calendar-cell.svelte'
import Day from './calendar-day.svelte'; import Day from './calendar-day.svelte'
import Grid from './calendar-grid.svelte'; import Grid from './calendar-grid.svelte'
import Header from './calendar-header.svelte'; import Header from './calendar-header.svelte'
import Months from './calendar-months.svelte'; import Months from './calendar-months.svelte'
import GridRow from './calendar-grid-row.svelte'; import GridRow from './calendar-grid-row.svelte'
import Heading from './calendar-heading.svelte'; import Heading from './calendar-heading.svelte'
import GridBody from './calendar-grid-body.svelte'; import GridBody from './calendar-grid-body.svelte'
import GridHead from './calendar-grid-head.svelte'; import GridHead from './calendar-grid-head.svelte'
import HeadCell from './calendar-head-cell.svelte'; import HeadCell from './calendar-head-cell.svelte'
import NextButton from './calendar-next-button.svelte'; import NextButton from './calendar-next-button.svelte'
import PrevButton from './calendar-prev-button.svelte'; import PrevButton from './calendar-prev-button.svelte'
export { export {
Day, Day,
@@ -27,4 +27,4 @@ export {
PrevButton, PrevButton,
// //
Root as Calendar Root as Calendar
}; }

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div class={cn('p-6 pt-0', className)} {...$$restProps}> <div class={cn('p-6 pt-0', className)} {...$$restProps}>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = HTMLAttributes<HTMLParagraphElement>; type $$Props = HTMLAttributes<HTMLParagraphElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}> <p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}> <div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}> <div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>

View File

@@ -1,20 +1,21 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HeadingLevel } from '.'; import type { HeadingLevel } from '.'
type $$Props = HTMLAttributes<HTMLHeadingElement> & { type $$Props = HTMLAttributes<HTMLHeadingElement> & {
tag?: HeadingLevel; tag?: HeadingLevel
}; }
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let tag: $$Props['tag'] = 'h3'; export let tag: $$Props['tag'] = 'h3'
export { className as class }; export { className as class }
</script> </script>
<svelte:element <svelte:element
this={tag} this={tag}
class={cn('text-lg font-semibold leading-none tracking-tight', className)} class={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</svelte:element> </svelte:element>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
@@ -13,6 +13,7 @@
'rounded-lg border bg-card text-card-foreground shadow-sm', 'rounded-lg border bg-card text-card-foreground shadow-sm',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,9 +1,9 @@
import Root from './card.svelte'; import Root from './card.svelte'
import Content from './card-content.svelte'; import Content from './card-content.svelte'
import Description from './card-description.svelte'; import Description from './card-description.svelte'
import Footer from './card-footer.svelte'; import Footer from './card-footer.svelte'
import Header from './card-header.svelte'; import Header from './card-header.svelte'
import Title from './card-title.svelte'; import Title from './card-title.svelte'
export { export {
Root, Root,
@@ -19,6 +19,6 @@ export {
Footer as CardFooter, Footer as CardFooter,
Header as CardHeader, Header as CardHeader,
Title as CardTitle Title as CardTitle
}; }
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils.js'; import { cn } from '$lib/utils.js'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { getEmblaContext } from './context.js'; import { getEmblaContext } from './context.js'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
const { orientation } = getEmblaContext('<Carousel.Content/>'); const { orientation } = getEmblaContext('<Carousel.Content/>')
</script> </script>
<div class="overflow-hidden"> <div class="overflow-hidden">
@@ -19,7 +19,8 @@
className className
)} )}
data-embla-container="" data-embla-container=""
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>
</div> </div>

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import { getEmblaContext } from './context.js'; import { getEmblaContext } from './context.js'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
const { orientation } = getEmblaContext('<Carousel.Item/>'); const { orientation } = getEmblaContext('<Carousel.Item/>')
</script> </script>
<div <div
@@ -19,6 +19,7 @@
className className
)} )}
data-embla-slide="" data-embla-slide=""
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -3,21 +3,20 @@
Button, Button,
type Props, type Props,
buttonVariants buttonVariants
} from '$lib/components/ui/button/index.js'; } from '$lib/components/ui/button/index.js'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { ArrowRight } from 'lucide-svelte'; import { ArrowRight } from 'lucide-svelte'
import type { VariantProps } from 'tailwind-variants'; import type { VariantProps } from 'tailwind-variants'
import { getEmblaContext } from './context.js'; import { getEmblaContext } from './context.js'
type $$Props = Props; type $$Props = Props
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
export let variant: VariantProps<typeof buttonVariants>['variant'] = export let variant: VariantProps<typeof buttonVariants>['variant'] = 'outline'
'outline'; export let size: VariantProps<typeof buttonVariants>['size'] = 'icon'
export let size: VariantProps<typeof buttonVariants>['size'] = 'icon';
const { orientation, canScrollNext, scrollNext, handleKeyDown } = const { orientation, canScrollNext, scrollNext, handleKeyDown } =
getEmblaContext('<Carousel.Next/>'); getEmblaContext('<Carousel.Next/>')
</script> </script>
<Button <Button
@@ -33,7 +32,8 @@
disabled={!$canScrollNext} disabled={!$canScrollNext}
on:click={scrollNext} on:click={scrollNext}
on:keydown={handleKeyDown} on:keydown={handleKeyDown}
{...$$restProps}> {...$$restProps}
>
<ArrowRight class="h-4 w-4" /> <ArrowRight class="h-4 w-4" />
<span class="sr-only">Next slide</span> <span class="sr-only">Next slide</span>
</Button> </Button>

View File

@@ -3,22 +3,21 @@
Button, Button,
type Props, type Props,
buttonVariants buttonVariants
} from '$lib/components/ui/button/index.js'; } from '$lib/components/ui/button/index.js'
import { cn } from '$lib/utils.js'; import { cn } from '$lib/utils.js'
import { ArrowLeft } from 'lucide-svelte'; import { ArrowLeft } from 'lucide-svelte'
import type { VariantProps } from 'tailwind-variants'; import type { VariantProps } from 'tailwind-variants'
import { getEmblaContext } from './context.js'; import { getEmblaContext } from './context.js'
type $$Props = Props; type $$Props = Props
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
export let variant: VariantProps<typeof buttonVariants>['variant'] = export let variant: VariantProps<typeof buttonVariants>['variant'] = 'outline'
'outline'; export let size: VariantProps<typeof buttonVariants>['size'] = 'icon'
export let size: VariantProps<typeof buttonVariants>['size'] = 'icon';
const { orientation, canScrollPrev, scrollPrev, handleKeyDown } = const { orientation, canScrollPrev, scrollPrev, handleKeyDown } =
getEmblaContext('<Carousel.Previous/>'); getEmblaContext('<Carousel.Previous/>')
</script> </script>
<Button <Button
@@ -34,7 +33,8 @@
disabled={!$canScrollPrev} disabled={!$canScrollPrev}
on:click={scrollPrev} on:click={scrollPrev}
on:keydown={handleKeyDown} on:keydown={handleKeyDown}
{...$$restProps}> {...$$restProps}
>
<ArrowLeft class="h-4 w-4" /> <ArrowLeft class="h-4 w-4" />
<span class="sr-only">Previous slide</span> <span class="sr-only">Previous slide</span>
</Button> </Button>

View File

@@ -1,57 +1,57 @@
<script lang="ts"> <script lang="ts">
import emblaCarouselSvelte from 'embla-carousel-svelte'; import emblaCarouselSvelte from 'embla-carousel-svelte'
import { import {
setEmblaContex, setEmblaContex,
type CarouselProps, type CarouselProps,
type CarouselAPI type CarouselAPI
} from './context.js'; } from './context.js'
import { cn } from '$lib/utils.js'; import { cn } from '$lib/utils.js'
import { writable } from 'svelte/store'; import { writable } from 'svelte/store'
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte'
type $$Props = CarouselProps; type $$Props = CarouselProps
export let opts = {}; export let opts = {}
export let plugins: NonNullable<$$Props['plugins']> = []; export let plugins: NonNullable<$$Props['plugins']> = []
export let api: $$Props['api'] = undefined; export let api: $$Props['api'] = undefined
export let orientation: NonNullable<$$Props['orientation']> = 'horizontal'; export let orientation: NonNullable<$$Props['orientation']> = 'horizontal'
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
const apiStore = writable<CarouselAPI | undefined>(undefined); const apiStore = writable<CarouselAPI | undefined>(undefined)
const orientationStore = writable(orientation); const orientationStore = writable(orientation)
const canScrollPrev = writable(false); const canScrollPrev = writable(false)
const canScrollNext = writable(false); const canScrollNext = writable(false)
$: orientationStore.set(orientation); $: orientationStore.set(orientation)
function scrollPrev() { function scrollPrev() {
api?.scrollPrev(); api?.scrollPrev()
} }
function scrollNext() { function scrollNext() {
api?.scrollNext(); api?.scrollNext()
} }
function onSelect(api: CarouselAPI) { function onSelect(api: CarouselAPI) {
if (!api) return; if (!api) return
canScrollPrev.set(api.canScrollPrev()); canScrollPrev.set(api.canScrollPrev())
canScrollNext.set(api.canScrollNext()); canScrollNext.set(api.canScrollNext())
} }
$: if (api) { $: if (api) {
onSelect(api); onSelect(api)
api.on('select', onSelect); api.on('select', onSelect)
api.on('reInit', onSelect); api.on('reInit', onSelect)
} }
function handleKeyDown(e: KeyboardEvent) { function handleKeyDown(e: KeyboardEvent) {
if (e.key === 'ArrowLeft') { if (e.key === 'ArrowLeft') {
e.preventDefault(); e.preventDefault()
scrollPrev(); scrollPrev()
} else if (e.key === 'ArrowRight') { } else if (e.key === 'ArrowRight') {
e.preventDefault(); e.preventDefault()
scrollNext(); scrollNext()
} }
} }
@@ -63,17 +63,17 @@
canScrollNext, canScrollNext,
canScrollPrev, canScrollPrev,
handleKeyDown handleKeyDown
}); })
function onInit(event: CustomEvent<CarouselAPI>) { function onInit(event: CustomEvent<CarouselAPI>) {
api = event.detail; api = event.detail
console.log(api.slideNodes()); console.log(api.slideNodes())
apiStore.set(api); apiStore.set(api)
} }
onDestroy(() => { onDestroy(() => {
api?.off('select', onSelect); api?.off('select', onSelect)
}); })
</script> </script>
<div <div
@@ -92,6 +92,7 @@
on:mouseleave on:mouseleave
role="region" role="region"
aria-roledescription="carousel" aria-roledescription="carousel"
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,52 +1,52 @@
import type { EmblaCarouselSvelteType } from 'embla-carousel-svelte'; import type { EmblaCarouselSvelteType } from 'embla-carousel-svelte'
import type emblaCarouselSvelte from 'embla-carousel-svelte'; import type emblaCarouselSvelte from 'embla-carousel-svelte'
import { getContext, hasContext, setContext } from 'svelte'; import { getContext, hasContext, setContext } from 'svelte'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
import type { Writable, Readable } from 'svelte/store'; import type { Writable, Readable } from 'svelte/store'
export type CarouselAPI = export type CarouselAPI =
NonNullable< NonNullable<
NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit'] NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']
> extends (evt: CustomEvent<infer CarouselAPI>) => void > extends (evt: CustomEvent<infer CarouselAPI>) => void
? CarouselAPI ? CarouselAPI
: never; : never
type EmblaCarouselConfig = NonNullable< type EmblaCarouselConfig = NonNullable<
Parameters<typeof emblaCarouselSvelte>[1] Parameters<typeof emblaCarouselSvelte>[1]
>; >
export type CarouselOptions = EmblaCarouselConfig['options']; export type CarouselOptions = EmblaCarouselConfig['options']
export type CarouselPlugins = EmblaCarouselConfig['plugins']; export type CarouselPlugins = EmblaCarouselConfig['plugins']
//// ////
export type CarouselProps = { export type CarouselProps = {
opts?: CarouselOptions; opts?: CarouselOptions
plugins?: CarouselPlugins; plugins?: CarouselPlugins
api?: CarouselAPI; api?: CarouselAPI
orientation?: 'horizontal' | 'vertical'; orientation?: 'horizontal' | 'vertical'
} & HTMLAttributes<HTMLDivElement>; } & HTMLAttributes<HTMLDivElement>
const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT'); const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT')
type EmblaContext = { type EmblaContext = {
api: Writable<CarouselAPI | undefined>; api: Writable<CarouselAPI | undefined>
orientation: Writable<'horizontal' | 'vertical'>; orientation: Writable<'horizontal' | 'vertical'>
scrollNext: () => void; scrollNext: () => void
scrollPrev: () => void; scrollPrev: () => void
canScrollNext: Readable<boolean>; canScrollNext: Readable<boolean>
canScrollPrev: Readable<boolean>; canScrollPrev: Readable<boolean>
handleKeyDown: (e: KeyboardEvent) => void; handleKeyDown: (e: KeyboardEvent) => void
}; }
export function setEmblaContex(config: EmblaContext): EmblaContext { export function setEmblaContex(config: EmblaContext): EmblaContext {
setContext(EMBLA_CAROUSEL_CONTEXT, config); setContext(EMBLA_CAROUSEL_CONTEXT, config)
return config; return config
} }
export function getEmblaContext(name = 'This component') { export function getEmblaContext(name = 'This component') {
if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) { if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
throw new Error(`${name} must be used within a <Carousel.Root> component`); throw new Error(`${name} must be used within a <Carousel.Root> component`)
} }
return getContext<ReturnType<typeof setEmblaContex>>(EMBLA_CAROUSEL_CONTEXT); return getContext<ReturnType<typeof setEmblaContex>>(EMBLA_CAROUSEL_CONTEXT)
} }

View File

@@ -1,5 +1,5 @@
export { default as Root } from './carousel.svelte'; export { default as Root } from './carousel.svelte'
export { default as Content } from './carousel-content.svelte'; export { default as Content } from './carousel-content.svelte'
export { default as Item } from './carousel-item.svelte'; export { default as Item } from './carousel-item.svelte'
export { default as Previous } from './carousel-previous.svelte'; export { default as Previous } from './carousel-previous.svelte'
export { default as Next } from './carousel-next.svelte'; export { default as Next } from './carousel-next.svelte'

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Checkbox as CheckboxPrimitive } from 'bits-ui'; import { Checkbox as CheckboxPrimitive } from 'bits-ui'
import { Check, Minus } from 'lucide-svelte'; import { Check, Minus } from 'lucide-svelte'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CheckboxPrimitive.Props; type $$Props = CheckboxPrimitive.Props
type $$Events = CheckboxPrimitive.Events; type $$Events = CheckboxPrimitive.Events
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let checked: $$Props['checked'] = false; export let checked: $$Props['checked'] = false
export { className as class }; export { className as class }
</script> </script>
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
@@ -18,11 +18,13 @@
)} )}
bind:checked bind:checked
{...$$restProps} {...$$restProps}
on:click> on:click
>
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
class={cn('flex h-4 w-4 items-center justify-center text-current')} class={cn('flex h-4 w-4 items-center justify-center text-current')}
let:isChecked let:isChecked
let:isIndeterminate> let:isIndeterminate
>
{#if isChecked} {#if isChecked}
<Check class="h-3.5 w-3.5" /> <Check class="h-3.5 w-3.5" />
{:else if isIndeterminate} {:else if isIndeterminate}

View File

@@ -1,6 +1,6 @@
import Root from './checkbox.svelte'; import Root from './checkbox.svelte'
export { export {
Root, Root,
// //
Root as Checkbox Root as Checkbox
}; }

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { Collapsible as CollapsiblePrimitive } from 'bits-ui'; import { Collapsible as CollapsiblePrimitive } from 'bits-ui'
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition'
type $$Props = CollapsiblePrimitive.ContentProps; type $$Props = CollapsiblePrimitive.ContentProps
export let transition: $$Props['transition'] = slide; export let transition: $$Props['transition'] = slide
export let transitionConfig: $$Props['transitionConfig'] = { export let transitionConfig: $$Props['transitionConfig'] = {
duration: 150 duration: 150
}; }
</script> </script>
<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}> <CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>

View File

@@ -1,8 +1,8 @@
import { Collapsible as CollapsiblePrimitive } from 'bits-ui'; import { Collapsible as CollapsiblePrimitive } from 'bits-ui'
import Content from './collapsible-content.svelte'; import Content from './collapsible-content.svelte'
const Root = CollapsiblePrimitive.Root; const Root = CollapsiblePrimitive.Root
const Trigger = CollapsiblePrimitive.Trigger; const Trigger = CollapsiblePrimitive.Trigger
export { export {
Root, Root,
@@ -12,4 +12,4 @@ export {
Root as Collapsible, Root as Collapsible,
Content as CollapsibleContent, Content as CollapsibleContent,
Trigger as CollapsibleTrigger Trigger as CollapsibleTrigger
}; }

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import Command from './command.svelte'; import Command from './command.svelte'
import * as Dialog from '$lib/components/ui/dialog'; import * as Dialog from '$lib/components/ui/dialog'
import type { Dialog as DialogPrimitive } from 'bits-ui'; import type { Dialog as DialogPrimitive } from 'bits-ui'
import type { Command as CommandPrimitive } from 'cmdk-sv'; import type { Command as CommandPrimitive } from 'cmdk-sv'
type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps; type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps
export let open: $$Props['open'] = false; export let open: $$Props['open'] = false
export let value: $$Props['value'] = undefined; export let value: $$Props['value'] = undefined
</script> </script>
<Dialog.Root bind:open {...$$restProps}> <Dialog.Root bind:open {...$$restProps}>
@@ -15,7 +15,8 @@
<Command <Command
class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5" class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
{...$$restProps} {...$$restProps}
bind:value> bind:value
>
<slot /> <slot />
</Command> </Command>
</Dialog.Content> </Dialog.Content>

View File

@@ -1,14 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CommandPrimitive.EmptyProps; type $$Props = CommandPrimitive.EmptyProps
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
</script> </script>
<CommandPrimitive.Empty <CommandPrimitive.Empty
class={cn('py-6 text-center text-sm', className)} class={cn('py-6 text-center text-sm', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CommandPrimitive.Empty> </CommandPrimitive.Empty>

View File

@@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CommandPrimitive.GroupProps; type $$Props = CommandPrimitive.GroupProps
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
</script> </script>
<CommandPrimitive.Group <CommandPrimitive.Group
@@ -12,6 +12,7 @@
'overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground', 'overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CommandPrimitive.Group> </CommandPrimitive.Group>

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import { Search } from 'lucide-svelte'; import { Search } from 'lucide-svelte'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CommandPrimitive.InputProps; type $$Props = CommandPrimitive.InputProps
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
export let value: string = ''; export let value: string = ''
</script> </script>
<div class="flex items-center border-b px-2" data-cmdk-input-wrapper=""> <div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
@@ -18,5 +18,6 @@
className className
)} )}
{...$$restProps} {...$$restProps}
bind:value /> bind:value
/>
</div> </div>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CommandPrimitive.ItemProps; type $$Props = CommandPrimitive.ItemProps
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
</script> </script>
<CommandPrimitive.Item <CommandPrimitive.Item
@@ -13,6 +13,7 @@
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CommandPrimitive.Item> </CommandPrimitive.Item>

View File

@@ -1,14 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CommandPrimitive.ListProps; type $$Props = CommandPrimitive.ListProps
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
</script> </script>
<CommandPrimitive.List <CommandPrimitive.List
class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)} class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CommandPrimitive.List> </CommandPrimitive.List>

View File

@@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CommandPrimitive.SeparatorProps; type $$Props = CommandPrimitive.SeparatorProps
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
</script> </script>
<CommandPrimitive.Separator <CommandPrimitive.Separator
class={cn('-mx-1 h-px bg-border', className)} class={cn('-mx-1 h-px bg-border', className)}
{...$$restProps} /> {...$$restProps}
/>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLSpanElement>; type $$Props = HTMLAttributes<HTMLSpanElement>
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
</script> </script>
<span <span
class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</span> </span>

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = CommandPrimitive.CommandProps; type $$Props = CommandPrimitive.CommandProps
export let value: $$Props['value'] = undefined; export let value: $$Props['value'] = undefined
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined
export { className as class }; export { className as class }
</script> </script>
<CommandPrimitive.Root <CommandPrimitive.Root
@@ -16,6 +16,7 @@
className className
)} )}
bind:value bind:value
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</CommandPrimitive.Root> </CommandPrimitive.Root>

View File

@@ -1,16 +1,16 @@
import { Command as CommandPrimitive } from 'cmdk-sv'; import { Command as CommandPrimitive } from 'cmdk-sv'
import Root from './command.svelte'; import Root from './command.svelte'
import Dialog from './command-dialog.svelte'; import Dialog from './command-dialog.svelte'
import Empty from './command-empty.svelte'; import Empty from './command-empty.svelte'
import Group from './command-group.svelte'; import Group from './command-group.svelte'
import Item from './command-item.svelte'; import Item from './command-item.svelte'
import Input from './command-input.svelte'; import Input from './command-input.svelte'
import List from './command-list.svelte'; import List from './command-list.svelte'
import Separator from './command-separator.svelte'; import Separator from './command-separator.svelte'
import Shortcut from './command-shortcut.svelte'; import Shortcut from './command-shortcut.svelte'
const Loading = CommandPrimitive.Loading; const Loading = CommandPrimitive.Loading
export { export {
Root, Root,
@@ -34,4 +34,4 @@ export {
Separator as CommandSeparator, Separator as CommandSeparator,
Shortcut as CommandShortcut, Shortcut as CommandShortcut,
Loading as CommandLoading Loading as CommandLoading
}; }

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { Check } from 'lucide-svelte'; import { Check } from 'lucide-svelte'
type $$Props = ContextMenuPrimitive.CheckboxItemProps; type $$Props = ContextMenuPrimitive.CheckboxItemProps
type $$Events = ContextMenuPrimitive.CheckboxItemEvents; type $$Events = ContextMenuPrimitive.CheckboxItemEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let checked: $$Props['checked'] = undefined; export let checked: $$Props['checked'] = undefined
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.CheckboxItem <ContextMenuPrimitive.CheckboxItem
@@ -24,7 +24,8 @@
on:focusout on:focusout
on:pointerdown on:pointerdown
on:pointerleave on:pointerleave
on:pointermove> on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuPrimitive.CheckboxIndicator> <ContextMenuPrimitive.CheckboxIndicator>
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />

View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn, flyAndScale } from '$lib/utils'; import { cn, flyAndScale } from '$lib/utils'
type $$Props = ContextMenuPrimitive.ContentProps; type $$Props = ContextMenuPrimitive.ContentProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = undefined; export let transitionConfig: $$Props['transitionConfig'] = undefined
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.Content <ContextMenuPrimitive.Content
@@ -18,6 +18,7 @@
className className
)} )}
{...$$restProps} {...$$restProps}
on:keydown> on:keydown
>
<slot /> <slot />
</ContextMenuPrimitive.Content> </ContextMenuPrimitive.Content>

View File

@@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = ContextMenuPrimitive.ItemProps & { type $$Props = ContextMenuPrimitive.ItemProps & {
inset?: boolean; inset?: boolean
}; }
type $$Events = ContextMenuPrimitive.ItemEvents; type $$Events = ContextMenuPrimitive.ItemEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let inset: $$Props['inset'] = undefined; export let inset: $$Props['inset'] = undefined
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.Item <ContextMenuPrimitive.Item
@@ -25,6 +25,7 @@
on:focusout on:focusout
on:pointerdown on:pointerdown
on:pointerleave on:pointerleave
on:pointermove> on:pointermove
>
<slot /> <slot />
</ContextMenuPrimitive.Item> </ContextMenuPrimitive.Item>

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = ContextMenuPrimitive.LabelProps & { type $$Props = ContextMenuPrimitive.LabelProps & {
inset?: boolean; inset?: boolean
}; }
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let inset: $$Props['inset'] = undefined; export let inset: $$Props['inset'] = undefined
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.Label <ContextMenuPrimitive.Label
@@ -17,6 +17,7 @@
inset && 'pl-8', inset && 'pl-8',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</ContextMenuPrimitive.Label> </ContextMenuPrimitive.Label>

View File

@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
type $$Props = ContextMenuPrimitive.RadioGroupProps; type $$Props = ContextMenuPrimitive.RadioGroupProps
export let value: $$Props['value'] = undefined; export let value: $$Props['value'] = undefined
</script> </script>
<ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value> <ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { Circle } from 'lucide-svelte'; import { Circle } from 'lucide-svelte'
type $$Props = ContextMenuPrimitive.RadioItemProps; type $$Props = ContextMenuPrimitive.RadioItemProps
type $$Events = ContextMenuPrimitive.RadioItemEvents; type $$Events = ContextMenuPrimitive.RadioItemEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let value: ContextMenuPrimitive.RadioItemProps['value']; export let value: ContextMenuPrimitive.RadioItemProps['value']
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.RadioItem <ContextMenuPrimitive.RadioItem
@@ -24,7 +24,8 @@
on:focusout on:focusout
on:pointerdown on:pointerdown
on:pointerleave on:pointerleave
on:pointermove> on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuPrimitive.RadioIndicator> <ContextMenuPrimitive.RadioIndicator>
<Circle class="h-2 w-2 fill-current" /> <Circle class="h-2 w-2 fill-current" />

View File

@@ -1,13 +1,14 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = ContextMenuPrimitive.SeparatorProps; type $$Props = ContextMenuPrimitive.SeparatorProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.Separator <ContextMenuPrimitive.Separator
class={cn('-mx-1 my-1 h-px bg-border', className)} class={cn('-mx-1 my-1 h-px bg-border', className)}
{...$$restProps} /> {...$$restProps}
/>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLSpanElement>; type $$Props = HTMLAttributes<HTMLSpanElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<span <span
class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</span> </span>

View File

@@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn, flyAndScale } from '$lib/utils'; import { cn, flyAndScale } from '$lib/utils'
type $$Props = ContextMenuPrimitive.SubContentProps; type $$Props = ContextMenuPrimitive.SubContentProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = { export let transitionConfig: $$Props['transitionConfig'] = {
x: -10, x: -10,
y: 0 y: 0
}; }
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.SubContent <ContextMenuPrimitive.SubContent
@@ -23,6 +23,7 @@
{...$$restProps} {...$$restProps}
on:keydown on:keydown
on:focusout on:focusout
on:pointermove> on:pointermove
>
<slot /> <slot />
</ContextMenuPrimitive.SubContent> </ContextMenuPrimitive.SubContent>

View File

@@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { ChevronRight } from 'lucide-svelte'; import { ChevronRight } from 'lucide-svelte'
type $$Props = ContextMenuPrimitive.SubTriggerProps & { type $$Props = ContextMenuPrimitive.SubTriggerProps & {
inset?: boolean; inset?: boolean
}; }
type $$Events = ContextMenuPrimitive.SubTriggerEvents; type $$Events = ContextMenuPrimitive.SubTriggerEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let inset: $$Props['inset'] = undefined; export let inset: $$Props['inset'] = undefined
export { className as class }; export { className as class }
</script> </script>
<ContextMenuPrimitive.SubTrigger <ContextMenuPrimitive.SubTrigger
@@ -25,7 +25,8 @@
on:focusin on:focusin
on:focusout on:focusout
on:pointerleave on:pointerleave
on:pointermove> on:pointermove
>
<slot /> <slot />
<ChevronRight class="ml-auto h-4 w-4" /> <ChevronRight class="ml-auto h-4 w-4" />
</ContextMenuPrimitive.SubTrigger> </ContextMenuPrimitive.SubTrigger>

View File

@@ -1,20 +1,20 @@
import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'; import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
import Item from './context-menu-item.svelte'; import Item from './context-menu-item.svelte'
import Label from './context-menu-label.svelte'; import Label from './context-menu-label.svelte'
import Content from './context-menu-content.svelte'; import Content from './context-menu-content.svelte'
import Shortcut from './context-menu-shortcut.svelte'; import Shortcut from './context-menu-shortcut.svelte'
import RadioItem from './context-menu-radio-item.svelte'; import RadioItem from './context-menu-radio-item.svelte'
import Separator from './context-menu-separator.svelte'; import Separator from './context-menu-separator.svelte'
import RadioGroup from './context-menu-radio-group.svelte'; import RadioGroup from './context-menu-radio-group.svelte'
import SubContent from './context-menu-sub-content.svelte'; import SubContent from './context-menu-sub-content.svelte'
import SubTrigger from './context-menu-sub-trigger.svelte'; import SubTrigger from './context-menu-sub-trigger.svelte'
import CheckboxItem from './context-menu-checkbox-item.svelte'; import CheckboxItem from './context-menu-checkbox-item.svelte'
const Sub = ContextMenuPrimitive.Sub; const Sub = ContextMenuPrimitive.Sub
const Root = ContextMenuPrimitive.Root; const Root = ContextMenuPrimitive.Root
const Trigger = ContextMenuPrimitive.Trigger; const Trigger = ContextMenuPrimitive.Trigger
const Group = ContextMenuPrimitive.Group; const Group = ContextMenuPrimitive.Group
export { export {
Sub, Sub,
@@ -46,4 +46,4 @@ export {
SubContent as ContextMenuSubContent, SubContent as ContextMenuSubContent,
SubTrigger as ContextMenuSubTrigger, SubTrigger as ContextMenuSubTrigger,
CheckboxItem as ContextMenuCheckboxItem CheckboxItem as ContextMenuCheckboxItem
}; }

View File

@@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from 'bits-ui'; import { Dialog as DialogPrimitive } from 'bits-ui'
import * as Dialog from '.'; import * as Dialog from '.'
import { cn, flyAndScale } from '$lib/utils'; import { cn, flyAndScale } from '$lib/utils'
import { X } from 'lucide-svelte'; import { X } from 'lucide-svelte'
type $$Props = DialogPrimitive.ContentProps; type $$Props = DialogPrimitive.ContentProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = { export let transitionConfig: $$Props['transitionConfig'] = {
duration: 200 duration: 200
}; }
export { className as class }; export { className as class }
</script> </script>
<Dialog.Portal> <Dialog.Portal>
@@ -23,10 +23,12 @@
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full', 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
<DialogPrimitive.Close <DialogPrimitive.Close
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"> class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<X class="h-4 w-4" /> <X class="h-4 w-4" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from 'bits-ui'; import { Dialog as DialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = DialogPrimitive.DescriptionProps; type $$Props = DialogPrimitive.DescriptionProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DialogPrimitive.Description <DialogPrimitive.Description
class={cn('text-sm text-muted-foreground', className)} class={cn('text-sm text-muted-foreground', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</DialogPrimitive.Description> </DialogPrimitive.Description>

View File

@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
@@ -13,6 +13,7 @@
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,20 +1,21 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from 'bits-ui'; import { Dialog as DialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition'
type $$Props = DialogPrimitive.OverlayProps; type $$Props = DialogPrimitive.OverlayProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let transition: $$Props['transition'] = fade; export let transition: $$Props['transition'] = fade
export let transitionConfig: $$Props['transitionConfig'] = { export let transitionConfig: $$Props['transitionConfig'] = {
duration: 150 duration: 150
}; }
export { className as class }; export { className as class }
</script> </script>
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
{transition} {transition}
{transitionConfig} {transitionConfig}
class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)} class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
{...$$restProps} /> {...$$restProps}
/>

View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from 'bits-ui'; import { Dialog as DialogPrimitive } from 'bits-ui'
type $$Props = DialogPrimitive.PortalProps; type $$Props = DialogPrimitive.PortalProps
</script> </script>
<DialogPrimitive.Portal {...$$restProps}> <DialogPrimitive.Portal {...$$restProps}>

View File

@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from 'bits-ui'; import { Dialog as DialogPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = DialogPrimitive.TitleProps; type $$Props = DialogPrimitive.TitleProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DialogPrimitive.Title <DialogPrimitive.Title
class={cn('text-lg font-semibold leading-none tracking-tight', className)} class={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</DialogPrimitive.Title> </DialogPrimitive.Title>

View File

@@ -1,15 +1,15 @@
import { Dialog as DialogPrimitive } from 'bits-ui'; import { Dialog as DialogPrimitive } from 'bits-ui'
const Root = DialogPrimitive.Root; const Root = DialogPrimitive.Root
const Trigger = DialogPrimitive.Trigger; const Trigger = DialogPrimitive.Trigger
import Title from './dialog-title.svelte'; import Title from './dialog-title.svelte'
import Portal from './dialog-portal.svelte'; import Portal from './dialog-portal.svelte'
import Footer from './dialog-footer.svelte'; import Footer from './dialog-footer.svelte'
import Header from './dialog-header.svelte'; import Header from './dialog-header.svelte'
import Overlay from './dialog-overlay.svelte'; import Overlay from './dialog-overlay.svelte'
import Content from './dialog-content.svelte'; import Content from './dialog-content.svelte'
import Description from './dialog-description.svelte'; import Description from './dialog-description.svelte'
export { export {
Root, Root,
@@ -31,4 +31,4 @@ export {
Overlay as DialogOverlay, Overlay as DialogOverlay,
Content as DialogContent, Content as DialogContent,
Description as DialogDescription Description as DialogDescription
}; }

View File

@@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte'; import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import DrawerOverlay from './drawer-overlay.svelte'; import DrawerOverlay from './drawer-overlay.svelte'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = DrawerPrimitive.ContentProps; type $$Props = DrawerPrimitive.ContentProps
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DrawerPrimitive.Portal> <DrawerPrimitive.Portal>
@@ -16,7 +16,8 @@
'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background', 'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
className className
)} )}
{...$$restProps}> {...$$restProps}
>
<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" /> <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
<slot /> <slot />
</DrawerPrimitive.Content> </DrawerPrimitive.Content>

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte'; import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = DrawerPrimitive.DescriptionProps; type $$Props = DrawerPrimitive.DescriptionProps
export let el: $$Props['el'] = undefined; export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DrawerPrimitive.Description <DrawerPrimitive.Description
bind:el bind:el
class={cn('text-sm text-muted-foreground', className)} class={cn('text-sm text-muted-foreground', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</DrawerPrimitive.Description> </DrawerPrimitive.Description>

View File

@@ -1,19 +1,20 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement> & { type $$Props = HTMLAttributes<HTMLDivElement> & {
el?: HTMLDivElement; el?: HTMLDivElement
}; }
export let el: $$Props['el'] = undefined; export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
bind:this={el} bind:this={el}
class={cn('mt-auto flex flex-col gap-2 p-4', className)} class={cn('mt-auto flex flex-col gap-2 p-4', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,18 +1,19 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements'
type $$Props = HTMLAttributes<HTMLDivElement> & { type $$Props = HTMLAttributes<HTMLDivElement> & {
el?: HTMLDivElement; el?: HTMLDivElement
}; }
export let el: $$Props['el'] = undefined; export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<div <div
bind:this={el} bind:this={el}
class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</div> </div>

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte'; import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = DrawerPrimitive.OverlayProps; type $$Props = DrawerPrimitive.OverlayProps
export let el: $$Props['el'] = undefined; export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DrawerPrimitive.Overlay <DrawerPrimitive.Overlay
bind:el bind:el
class={cn('fixed inset-0 z-50 bg-black/80', className)} class={cn('fixed inset-0 z-50 bg-black/80', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</DrawerPrimitive.Overlay> </DrawerPrimitive.Overlay>

View File

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte'; import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = DrawerPrimitive.TitleProps; type $$Props = DrawerPrimitive.TitleProps
export let el: $$Props['el'] = undefined; export let el: $$Props['el'] = undefined
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DrawerPrimitive.Title <DrawerPrimitive.Title
bind:el bind:el
class={cn('text-lg font-semibold leading-none tracking-tight', className)} class={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</DrawerPrimitive.Title> </DrawerPrimitive.Title>

View File

@@ -1,16 +1,17 @@
<script lang="ts"> <script lang="ts">
import { Drawer as DrawerPrimitive } from 'vaul-svelte'; import { Drawer as DrawerPrimitive } from 'vaul-svelte'
type $$Props = DrawerPrimitive.Props; type $$Props = DrawerPrimitive.Props
export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true; export let shouldScaleBackground: $$Props['shouldScaleBackground'] = true
export let open: $$Props['open'] = false; export let open: $$Props['open'] = false
export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined; export let activeSnapPoint: $$Props['activeSnapPoint'] = undefined
</script> </script>
<DrawerPrimitive.Root <DrawerPrimitive.Root
{shouldScaleBackground} {shouldScaleBackground}
bind:open bind:open
bind:activeSnapPoint bind:activeSnapPoint
{...$$restProps}> {...$$restProps}
>
<slot /> <slot />
</DrawerPrimitive.Root> </DrawerPrimitive.Root>

View File

@@ -1,16 +1,16 @@
import { Drawer as DrawerPrimitive } from 'vaul-svelte'; import { Drawer as DrawerPrimitive } from 'vaul-svelte'
import Root from './drawer.svelte'; import Root from './drawer.svelte'
import Content from './drawer-content.svelte'; import Content from './drawer-content.svelte'
import Description from './drawer-description.svelte'; import Description from './drawer-description.svelte'
import Overlay from './drawer-overlay.svelte'; import Overlay from './drawer-overlay.svelte'
import Footer from './drawer-footer.svelte'; import Footer from './drawer-footer.svelte'
import Header from './drawer-header.svelte'; import Header from './drawer-header.svelte'
import Title from './drawer-title.svelte'; import Title from './drawer-title.svelte'
const Trigger = DrawerPrimitive.Trigger; const Trigger = DrawerPrimitive.Trigger
const Portal = DrawerPrimitive.Portal; const Portal = DrawerPrimitive.Portal
const Close = DrawerPrimitive.Close; const Close = DrawerPrimitive.Close
export { export {
Root, Root,
@@ -34,4 +34,4 @@ export {
Trigger as DrawerTrigger, Trigger as DrawerTrigger,
Portal as DrawerPortal, Portal as DrawerPortal,
Close as DrawerClose Close as DrawerClose
}; }

View File

@@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
import { Check } from 'lucide-svelte'; import { Check } from 'lucide-svelte'
type $$Props = DropdownMenuPrimitive.CheckboxItemProps; type $$Props = DropdownMenuPrimitive.CheckboxItemProps
type $$Events = DropdownMenuPrimitive.CheckboxItemEvents; type $$Events = DropdownMenuPrimitive.CheckboxItemEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let checked: $$Props['checked'] = undefined; export let checked: $$Props['checked'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
@@ -24,7 +24,8 @@
on:focusout on:focusout
on:pointerdown on:pointerdown
on:pointerleave on:pointerleave
on:pointermove> on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.CheckboxIndicator> <DropdownMenuPrimitive.CheckboxIndicator>
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />

View File

@@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn, flyAndScale } from '$lib/utils'; import { cn, flyAndScale } from '$lib/utils'
type $$Props = DropdownMenuPrimitive.ContentProps; type $$Props = DropdownMenuPrimitive.ContentProps
type $$Events = DropdownMenuPrimitive.ContentEvents; type $$Events = DropdownMenuPrimitive.ContentEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let sideOffset: $$Props['sideOffset'] = 4; export let sideOffset: $$Props['sideOffset'] = 4
export let transition: $$Props['transition'] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale
export let transitionConfig: $$Props['transitionConfig'] = undefined; export let transitionConfig: $$Props['transitionConfig'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DropdownMenuPrimitive.Content <DropdownMenuPrimitive.Content
@@ -21,6 +21,7 @@
className className
)} )}
{...$$restProps} {...$$restProps}
on:keydown> on:keydown
>
<slot /> <slot />
</DropdownMenuPrimitive.Content> </DropdownMenuPrimitive.Content>

View File

@@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'; import { cn } from '$lib/utils'
type $$Props = DropdownMenuPrimitive.ItemProps & { type $$Props = DropdownMenuPrimitive.ItemProps & {
inset?: boolean; inset?: boolean
}; }
type $$Events = DropdownMenuPrimitive.ItemEvents; type $$Events = DropdownMenuPrimitive.ItemEvents
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined
export let inset: $$Props['inset'] = undefined; export let inset: $$Props['inset'] = undefined
export { className as class }; export { className as class }
</script> </script>
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
@@ -25,6 +25,7 @@
on:focusout on:focusout
on:pointerdown on:pointerdown
on:pointerleave on:pointerleave
on:pointermove> on:pointermove
>
<slot /> <slot />
</DropdownMenuPrimitive.Item> </DropdownMenuPrimitive.Item>

Some files were not shown because too many files have changed in this diff Show More