svelte-incant 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -0
- package/dist/attachment.svelte.d.ts +8 -0
- package/dist/attachment.svelte.js +93 -0
- package/dist/combobox-example.svelte +155 -0
- package/dist/combobox-example.svelte.d.ts +3 -0
- package/dist/components/CodeBlock.svelte +213 -0
- package/dist/components/CodeBlock.svelte.d.ts +12 -0
- package/dist/components/header.svelte +155 -0
- package/dist/components/header.svelte.d.ts +3 -0
- package/dist/components/kbds.svelte +31 -0
- package/dist/components/kbds.svelte.d.ts +7 -0
- package/dist/components/ui/badge/badge.svelte +49 -0
- package/dist/components/ui/badge/badge.svelte.d.ts +32 -0
- package/dist/components/ui/badge/index.d.ts +2 -0
- package/dist/components/ui/badge/index.js +2 -0
- package/dist/components/ui/button/button.svelte +82 -0
- package/dist/components/ui/button/button.svelte.d.ts +64 -0
- package/dist/components/ui/button/index.d.ts +2 -0
- package/dist/components/ui/button/index.js +4 -0
- package/dist/components/ui/card/card-action.svelte +20 -0
- package/dist/components/ui/card/card-action.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-content.svelte +15 -0
- package/dist/components/ui/card/card-content.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-description.svelte +20 -0
- package/dist/components/ui/card/card-description.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-footer.svelte +20 -0
- package/dist/components/ui/card/card-footer.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-header.svelte +23 -0
- package/dist/components/ui/card/card-header.svelte.d.ts +5 -0
- package/dist/components/ui/card/card-title.svelte +20 -0
- package/dist/components/ui/card/card-title.svelte.d.ts +5 -0
- package/dist/components/ui/card/card.svelte +23 -0
- package/dist/components/ui/card/card.svelte.d.ts +5 -0
- package/dist/components/ui/card/index.d.ts +8 -0
- package/dist/components/ui/card/index.js +10 -0
- package/dist/components/ui/command/command-dialog.svelte +40 -0
- package/dist/components/ui/command/command-dialog.svelte.d.ts +12 -0
- package/dist/components/ui/command/command-empty.svelte +17 -0
- package/dist/components/ui/command/command-empty.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-group.svelte +30 -0
- package/dist/components/ui/command/command-group.svelte.d.ts +7 -0
- package/dist/components/ui/command/command-input.svelte +26 -0
- package/dist/components/ui/command/command-input.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-item.svelte +20 -0
- package/dist/components/ui/command/command-item.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-link-item.svelte +20 -0
- package/dist/components/ui/command/command-link-item.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-list.svelte +17 -0
- package/dist/components/ui/command/command-list.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-loading.svelte +7 -0
- package/dist/components/ui/command/command-loading.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-separator.svelte +17 -0
- package/dist/components/ui/command/command-separator.svelte.d.ts +4 -0
- package/dist/components/ui/command/command-shortcut.svelte +20 -0
- package/dist/components/ui/command/command-shortcut.svelte.d.ts +5 -0
- package/dist/components/ui/command/command.svelte +28 -0
- package/dist/components/ui/command/command.svelte.d.ts +8 -0
- package/dist/components/ui/command/index.d.ts +12 -0
- package/dist/components/ui/command/index.js +14 -0
- package/dist/components/ui/dialog/dialog-close.svelte +7 -0
- package/dist/components/ui/dialog/dialog-close.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-content.svelte +45 -0
- package/dist/components/ui/dialog/dialog-content.svelte.d.ts +13 -0
- package/dist/components/ui/dialog/dialog-description.svelte +17 -0
- package/dist/components/ui/dialog/dialog-description.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-footer.svelte +20 -0
- package/dist/components/ui/dialog/dialog-footer.svelte.d.ts +5 -0
- package/dist/components/ui/dialog/dialog-header.svelte +20 -0
- package/dist/components/ui/dialog/dialog-header.svelte.d.ts +5 -0
- package/dist/components/ui/dialog/dialog-overlay.svelte +20 -0
- package/dist/components/ui/dialog/dialog-overlay.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-portal.svelte +7 -0
- package/dist/components/ui/dialog/dialog-portal.svelte.d.ts +3 -0
- package/dist/components/ui/dialog/dialog-title.svelte +17 -0
- package/dist/components/ui/dialog/dialog-title.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog-trigger.svelte +7 -0
- package/dist/components/ui/dialog/dialog-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/dialog/dialog.svelte +7 -0
- package/dist/components/ui/dialog/dialog.svelte.d.ts +3 -0
- package/dist/components/ui/dialog/index.d.ts +11 -0
- package/dist/components/ui/dialog/index.js +13 -0
- package/dist/components/ui/input/index.d.ts +2 -0
- package/dist/components/ui/input/index.js +4 -0
- package/dist/components/ui/input/input.svelte +52 -0
- package/dist/components/ui/input/input.svelte.d.ts +13 -0
- package/dist/components/ui/kbd/index.d.ts +3 -0
- package/dist/components/ui/kbd/index.js +5 -0
- package/dist/components/ui/kbd/kbd-group.svelte +20 -0
- package/dist/components/ui/kbd/kbd-group.svelte.d.ts +5 -0
- package/dist/components/ui/kbd/kbd.svelte +25 -0
- package/dist/components/ui/kbd/kbd.svelte.d.ts +5 -0
- package/dist/components/ui/popover/index.d.ts +6 -0
- package/dist/components/ui/popover/index.js +8 -0
- package/dist/components/ui/popover/popover-close.svelte +7 -0
- package/dist/components/ui/popover/popover-close.svelte.d.ts +4 -0
- package/dist/components/ui/popover/popover-content.svelte +31 -0
- package/dist/components/ui/popover/popover-content.svelte.d.ts +10 -0
- package/dist/components/ui/popover/popover-portal.svelte +7 -0
- package/dist/components/ui/popover/popover-portal.svelte.d.ts +3 -0
- package/dist/components/ui/popover/popover-trigger.svelte +17 -0
- package/dist/components/ui/popover/popover-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/popover/popover.svelte +7 -0
- package/dist/components/ui/popover/popover.svelte.d.ts +3 -0
- package/dist/components/ui/table/index.d.ts +9 -0
- package/dist/components/ui/table/index.js +11 -0
- package/dist/components/ui/table/table-body.svelte +20 -0
- package/dist/components/ui/table/table-body.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-caption.svelte +20 -0
- package/dist/components/ui/table/table-caption.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-cell.svelte +23 -0
- package/dist/components/ui/table/table-cell.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-footer.svelte +20 -0
- package/dist/components/ui/table/table-footer.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-head.svelte +23 -0
- package/dist/components/ui/table/table-head.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-header.svelte +20 -0
- package/dist/components/ui/table/table-header.svelte.d.ts +5 -0
- package/dist/components/ui/table/table-row.svelte +23 -0
- package/dist/components/ui/table/table-row.svelte.d.ts +5 -0
- package/dist/components/ui/table/table.svelte +22 -0
- package/dist/components/ui/table/table.svelte.d.ts +5 -0
- package/dist/components/ui/tabs/index.d.ts +5 -0
- package/dist/components/ui/tabs/index.js +7 -0
- package/dist/components/ui/tabs/tabs-content.svelte +17 -0
- package/dist/components/ui/tabs/tabs-content.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs-list.svelte +20 -0
- package/dist/components/ui/tabs/tabs-list.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs-trigger.svelte +20 -0
- package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs.svelte +19 -0
- package/dist/components/ui/tabs/tabs.svelte.d.ts +4 -0
- package/dist/components/ui/tooltip/index.d.ts +6 -0
- package/dist/components/ui/tooltip/index.js +8 -0
- package/dist/components/ui/tooltip/tooltip-content.svelte +52 -0
- package/dist/components/ui/tooltip/tooltip-content.svelte.d.ts +11 -0
- package/dist/components/ui/tooltip/tooltip-portal.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip-portal.svelte.d.ts +4 -0
- package/dist/components/ui/tooltip/tooltip-provider.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip-provider.svelte.d.ts +4 -0
- package/dist/components/ui/tooltip/tooltip-trigger.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/tooltip/tooltip.svelte +7 -0
- package/dist/components/ui/tooltip/tooltip.svelte.d.ts +4 -0
- package/dist/focus.svelte +56 -0
- package/dist/focus.svelte.d.ts +13 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +7 -0
- package/dist/overlay-component.svelte +19 -0
- package/dist/overlay-component.svelte.d.ts +6 -0
- package/dist/palette.svelte +132 -0
- package/dist/palette.svelte.d.ts +7 -0
- package/dist/palette.svelte.js +177 -0
- package/dist/shortcut.svelte +26 -0
- package/dist/shortcut.svelte.d.ts +8 -0
- package/dist/utils.d.ts +13 -0
- package/dist/utils.js +32 -0
- package/package.json +87 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import Root from './card.svelte';
|
|
2
|
+
import Content from './card-content.svelte';
|
|
3
|
+
import Description from './card-description.svelte';
|
|
4
|
+
import Footer from './card-footer.svelte';
|
|
5
|
+
import Header from './card-header.svelte';
|
|
6
|
+
import Title from './card-title.svelte';
|
|
7
|
+
import Action from './card-action.svelte';
|
|
8
|
+
export { Root, Content, Description, Footer, Header, Title, Action,
|
|
9
|
+
//
|
|
10
|
+
Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
import Command from './command.svelte';
|
|
5
|
+
import * as Dialog from '../dialog/index.js';
|
|
6
|
+
import type { WithoutChildrenOrChild } from '../../../utils.js';
|
|
7
|
+
|
|
8
|
+
let {
|
|
9
|
+
open = $bindable(false),
|
|
10
|
+
ref = $bindable(null),
|
|
11
|
+
value = $bindable(''),
|
|
12
|
+
title = 'Command Palette',
|
|
13
|
+
description = 'Search for a command to run',
|
|
14
|
+
portalProps,
|
|
15
|
+
children,
|
|
16
|
+
...restProps
|
|
17
|
+
}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
|
|
18
|
+
WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
|
|
19
|
+
portalProps?: DialogPrimitive.PortalProps;
|
|
20
|
+
children: Snippet;
|
|
21
|
+
title?: string;
|
|
22
|
+
description?: string;
|
|
23
|
+
} = $props();
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<Dialog.Root bind:open {...restProps}>
|
|
27
|
+
<Dialog.Header class="sr-only">
|
|
28
|
+
<Dialog.Title>{title}</Dialog.Title>
|
|
29
|
+
<Dialog.Description>{description}</Dialog.Description>
|
|
30
|
+
</Dialog.Header>
|
|
31
|
+
<Dialog.Content class="overflow-hidden p-0" {portalProps}>
|
|
32
|
+
<Command
|
|
33
|
+
class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
|
|
34
|
+
{...restProps}
|
|
35
|
+
bind:value
|
|
36
|
+
bind:ref
|
|
37
|
+
{children}
|
|
38
|
+
/>
|
|
39
|
+
</Dialog.Content>
|
|
40
|
+
</Dialog.Root>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { WithoutChildrenOrChild } from '../../../utils.js';
|
|
4
|
+
type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
|
|
5
|
+
portalProps?: DialogPrimitive.PortalProps;
|
|
6
|
+
children: Snippet;
|
|
7
|
+
title?: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
};
|
|
10
|
+
declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
|
|
11
|
+
type CommandDialog = ReturnType<typeof CommandDialog>;
|
|
12
|
+
export default CommandDialog;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: CommandPrimitive.EmptyProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CommandPrimitive.Empty
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="command-empty"
|
|
15
|
+
class={cn('py-6 text-center text-sm', className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
/>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive, useId } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
heading,
|
|
10
|
+
value,
|
|
11
|
+
...restProps
|
|
12
|
+
}: CommandPrimitive.GroupProps & {
|
|
13
|
+
heading?: string;
|
|
14
|
+
} = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<CommandPrimitive.Group
|
|
18
|
+
bind:ref
|
|
19
|
+
data-slot="command-group"
|
|
20
|
+
class={cn('overflow-hidden p-1 text-foreground', className)}
|
|
21
|
+
value={value ?? heading ?? `----${useId()}`}
|
|
22
|
+
{...restProps}
|
|
23
|
+
>
|
|
24
|
+
{#if heading}
|
|
25
|
+
<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
|
26
|
+
{heading}
|
|
27
|
+
</CommandPrimitive.GroupHeading>
|
|
28
|
+
{/if}
|
|
29
|
+
<CommandPrimitive.GroupItems {children} />
|
|
30
|
+
</CommandPrimitive.Group>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
2
|
+
type $$ComponentProps = CommandPrimitive.GroupProps & {
|
|
3
|
+
heading?: string;
|
|
4
|
+
};
|
|
5
|
+
declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
6
|
+
type CommandGroup = ReturnType<typeof CommandGroup>;
|
|
7
|
+
export default CommandGroup;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
3
|
+
import SearchIcon from '@lucide/svelte/icons/search';
|
|
4
|
+
import { cn } from '../../../utils.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
value = $bindable(''),
|
|
10
|
+
...restProps
|
|
11
|
+
}: CommandPrimitive.InputProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<div class="flex h-9 items-center gap-2 border-b ps-3 pe-8" data-slot="command-input-wrapper">
|
|
15
|
+
<SearchIcon class="size-4 shrink-0 opacity-50" />
|
|
16
|
+
<CommandPrimitive.Input
|
|
17
|
+
data-slot="command-input"
|
|
18
|
+
class={cn(
|
|
19
|
+
'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
|
|
20
|
+
className
|
|
21
|
+
)}
|
|
22
|
+
bind:ref
|
|
23
|
+
{...restProps}
|
|
24
|
+
bind:value
|
|
25
|
+
/>
|
|
26
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: CommandPrimitive.ItemProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CommandPrimitive.Item
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="command-item"
|
|
15
|
+
class={cn(
|
|
16
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: CommandPrimitive.LinkItemProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CommandPrimitive.LinkItem
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="command-item"
|
|
15
|
+
class={cn(
|
|
16
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: CommandPrimitive.ListProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CommandPrimitive.List
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="command-list"
|
|
15
|
+
class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
/>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: CommandPrimitive.SeparatorProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<CommandPrimitive.Separator
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="command-separator"
|
|
15
|
+
class={cn('-mx-1 h-px bg-border', className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
/>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<span
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="command-shortcut"
|
|
16
|
+
class={cn('ms-auto text-xs tracking-widest text-muted-foreground', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</span>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
declare const CommandShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
|
|
4
|
+
type CommandShortcut = ReturnType<typeof CommandShortcut>;
|
|
5
|
+
export default CommandShortcut;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn } from '../../../utils.js';
|
|
3
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
4
|
+
|
|
5
|
+
export type CommandRootApi = CommandPrimitive.Root;
|
|
6
|
+
|
|
7
|
+
let {
|
|
8
|
+
api = $bindable(null),
|
|
9
|
+
ref = $bindable(null),
|
|
10
|
+
value = $bindable(''),
|
|
11
|
+
class: className,
|
|
12
|
+
...restProps
|
|
13
|
+
}: CommandPrimitive.RootProps & {
|
|
14
|
+
api?: CommandRootApi | null;
|
|
15
|
+
} = $props();
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<CommandPrimitive.Root
|
|
19
|
+
bind:this={api}
|
|
20
|
+
bind:value
|
|
21
|
+
bind:ref
|
|
22
|
+
data-slot="command"
|
|
23
|
+
class={cn(
|
|
24
|
+
'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
|
|
25
|
+
className
|
|
26
|
+
)}
|
|
27
|
+
{...restProps}
|
|
28
|
+
/>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Command as CommandPrimitive } from 'bits-ui';
|
|
2
|
+
export type CommandRootApi = CommandPrimitive.Root;
|
|
3
|
+
type $$ComponentProps = CommandPrimitive.RootProps & {
|
|
4
|
+
api?: CommandRootApi | null;
|
|
5
|
+
};
|
|
6
|
+
declare const Command: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "api">;
|
|
7
|
+
type Command = ReturnType<typeof Command>;
|
|
8
|
+
export default Command;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import Root from './command.svelte';
|
|
2
|
+
import Loading from './command-loading.svelte';
|
|
3
|
+
import Dialog from './command-dialog.svelte';
|
|
4
|
+
import Empty from './command-empty.svelte';
|
|
5
|
+
import Group from './command-group.svelte';
|
|
6
|
+
import Item from './command-item.svelte';
|
|
7
|
+
import Input from './command-input.svelte';
|
|
8
|
+
import List from './command-list.svelte';
|
|
9
|
+
import Separator from './command-separator.svelte';
|
|
10
|
+
import Shortcut from './command-shortcut.svelte';
|
|
11
|
+
import LinkItem from './command-link-item.svelte';
|
|
12
|
+
export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import Root from './command.svelte';
|
|
2
|
+
import Loading from './command-loading.svelte';
|
|
3
|
+
import Dialog from './command-dialog.svelte';
|
|
4
|
+
import Empty from './command-empty.svelte';
|
|
5
|
+
import Group from './command-group.svelte';
|
|
6
|
+
import Item from './command-item.svelte';
|
|
7
|
+
import Input from './command-input.svelte';
|
|
8
|
+
import List from './command-list.svelte';
|
|
9
|
+
import Separator from './command-separator.svelte';
|
|
10
|
+
import Shortcut from './command-shortcut.svelte';
|
|
11
|
+
import LinkItem from './command-link-item.svelte';
|
|
12
|
+
export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading,
|
|
13
|
+
//
|
|
14
|
+
Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Dialog as DialogPrimitive } from 'bits-ui';
|
|
3
|
+
import DialogPortal from './dialog-portal.svelte';
|
|
4
|
+
import XIcon from '@lucide/svelte/icons/x';
|
|
5
|
+
import type { Snippet } from 'svelte';
|
|
6
|
+
import * as Dialog from './index.js';
|
|
7
|
+
import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
|
|
8
|
+
import type { ComponentProps } from 'svelte';
|
|
9
|
+
|
|
10
|
+
let {
|
|
11
|
+
ref = $bindable(null),
|
|
12
|
+
class: className,
|
|
13
|
+
portalProps,
|
|
14
|
+
children,
|
|
15
|
+
showCloseButton = true,
|
|
16
|
+
...restProps
|
|
17
|
+
}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
|
|
18
|
+
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
|
|
19
|
+
children: Snippet;
|
|
20
|
+
showCloseButton?: boolean;
|
|
21
|
+
} = $props();
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<DialogPortal {...portalProps}>
|
|
25
|
+
<Dialog.Overlay />
|
|
26
|
+
<DialogPrimitive.Content
|
|
27
|
+
bind:ref
|
|
28
|
+
data-slot="dialog-content"
|
|
29
|
+
class={cn(
|
|
30
|
+
'fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
|
|
31
|
+
className
|
|
32
|
+
)}
|
|
33
|
+
{...restProps}
|
|
34
|
+
>
|
|
35
|
+
{@render children?.()}
|
|
36
|
+
{#if showCloseButton}
|
|
37
|
+
<DialogPrimitive.Close
|
|
38
|
+
class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
|
39
|
+
>
|
|
40
|
+
<XIcon />
|
|
41
|
+
<span class="sr-only">Close</span>
|
|
42
|
+
</DialogPrimitive.Close>
|
|
43
|
+
{/if}
|
|
44
|
+
</DialogPrimitive.Content>
|
|
45
|
+
</DialogPortal>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Dialog as DialogPrimitive } from 'bits-ui';
|
|
2
|
+
import DialogPortal from './dialog-portal.svelte';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
import { type WithoutChildrenOrChild } from '../../../utils.js';
|
|
5
|
+
import type { ComponentProps } from 'svelte';
|
|
6
|
+
type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
|
|
7
|
+
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
|
|
8
|
+
children: Snippet;
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
};
|
|
11
|
+
declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
12
|
+
type DialogContent = ReturnType<typeof DialogContent>;
|
|
13
|
+
export default DialogContent;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Dialog as DialogPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: DialogPrimitive.DescriptionProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<DialogPrimitive.Description
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="dialog-description"
|
|
15
|
+
class={cn('text-sm text-muted-foreground', className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
/>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="dialog-footer"
|
|
16
|
+
class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
declare const DialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type DialogFooter = ReturnType<typeof DialogFooter>;
|
|
5
|
+
export default DialogFooter;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="dialog-header"
|
|
16
|
+
class={cn('flex flex-col gap-2 text-center sm:text-start', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
3
|
+
declare const DialogHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type DialogHeader = ReturnType<typeof DialogHeader>;
|
|
5
|
+
export default DialogHeader;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Dialog as DialogPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: DialogPrimitive.OverlayProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<DialogPrimitive.Overlay
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="dialog-overlay"
|
|
15
|
+
class={cn(
|
|
16
|
+
'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Dialog as DialogPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: DialogPrimitive.TitleProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<DialogPrimitive.Title
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="dialog-title"
|
|
15
|
+
class={cn('text-lg leading-none font-semibold', className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
/>
|