@autumnsgrove/groveengine 0.1.1 → 0.3.1
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/dist/components/admin/GutterManager.svelte +1 -2
- package/dist/components/admin/MarkdownEditor.svelte +1 -91
- package/dist/components/custom/ContentWithGutter.svelte +33 -7
- package/dist/components/custom/InternalsPostViewer.svelte +95 -0
- package/dist/components/custom/InternalsPostViewer.svelte.d.ts +13 -0
- package/dist/components/ui/index.d.ts +0 -12
- package/dist/components/ui/index.js +2 -13
- package/dist/components/ui/select/select-separator.svelte +2 -3
- package/dist/components/ui/select/select-separator.svelte.d.ts +1 -1
- package/dist/utils/markdown.d.ts +42 -11
- package/dist/utils/markdown.js +106 -48
- package/dist/utils/sanitize.js +3 -2
- package/package.json +2 -3
- package/dist/components/ui/Badge.svelte +0 -48
- package/dist/components/ui/Badge.svelte.d.ts +0 -26
- package/dist/components/ui/Button.svelte +0 -74
- package/dist/components/ui/Button.svelte.d.ts +0 -34
- package/dist/components/ui/Card.svelte +0 -102
- package/dist/components/ui/Card.svelte.d.ts +0 -46
- package/dist/components/ui/Input.svelte +0 -81
- package/dist/components/ui/Input.svelte.d.ts +0 -35
- package/dist/components/ui/Skeleton.svelte +0 -31
- package/dist/components/ui/Skeleton.svelte.d.ts +0 -26
- package/dist/components/ui/Textarea.svelte +0 -81
- package/dist/components/ui/Textarea.svelte.d.ts +0 -35
- package/dist/components/ui/badge/badge.svelte +0 -50
- package/dist/components/ui/badge/badge.svelte.d.ts +0 -60
- package/dist/components/ui/badge/index.d.ts +0 -2
- package/dist/components/ui/badge/index.js +0 -2
- package/dist/components/ui/button/button.svelte +0 -82
- package/dist/components/ui/button/button.svelte.d.ts +0 -132
- package/dist/components/ui/button/index.d.ts +0 -2
- package/dist/components/ui/button/index.js +0 -4
- package/dist/components/ui/card/card-content.svelte +0 -16
- package/dist/components/ui/card/card-content.svelte.d.ts +0 -5
- package/dist/components/ui/card/card-description.svelte +0 -16
- package/dist/components/ui/card/card-description.svelte.d.ts +0 -5
- package/dist/components/ui/card/card-footer.svelte +0 -16
- package/dist/components/ui/card/card-footer.svelte.d.ts +0 -5
- package/dist/components/ui/card/card-header.svelte +0 -16
- package/dist/components/ui/card/card-header.svelte.d.ts +0 -5
- package/dist/components/ui/card/card-title.svelte +0 -25
- package/dist/components/ui/card/card-title.svelte.d.ts +0 -8
- package/dist/components/ui/card/card.svelte +0 -20
- package/dist/components/ui/card/card.svelte.d.ts +0 -5
- package/dist/components/ui/card/index.d.ts +0 -7
- package/dist/components/ui/card/index.js +0 -9
- package/dist/components/ui/input/index.d.ts +0 -2
- package/dist/components/ui/input/index.js +0 -4
- package/dist/components/ui/input/input.svelte +0 -46
- package/dist/components/ui/input/input.svelte.d.ts +0 -13
- package/dist/components/ui/separator/index.d.ts +0 -2
- package/dist/components/ui/separator/index.js +0 -4
- package/dist/components/ui/separator/separator.svelte +0 -22
- package/dist/components/ui/separator/separator.svelte.d.ts +0 -4
- package/dist/components/ui/skeleton/index.d.ts +0 -2
- package/dist/components/ui/skeleton/index.js +0 -4
- package/dist/components/ui/skeleton/skeleton.svelte +0 -17
- package/dist/components/ui/skeleton/skeleton.svelte.d.ts +0 -5
- package/dist/components/ui/textarea/index.d.ts +0 -2
- package/dist/components/ui/textarea/index.js +0 -4
- package/dist/components/ui/textarea/textarea.svelte +0 -24
- package/dist/components/ui/textarea/textarea.svelte.d.ts +0 -6
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { Badge as ShadcnBadge } from "./badge";
|
|
3
|
-
import type { Snippet } from "svelte";
|
|
4
|
-
|
|
5
|
-
type BadgeVariant = "default" | "secondary" | "destructive" | "tag";
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Badge component wrapper for displaying small labels, tags, or status indicators
|
|
9
|
-
*
|
|
10
|
-
* @prop {BadgeVariant} [variant="default"] - Badge style variant (default|secondary|destructive|tag)
|
|
11
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
12
|
-
* @prop {Snippet} [children] - Badge content (typically short text)
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* <Badge variant="default">New</Badge>
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* <Badge variant="destructive">Error</Badge>
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* <Badge variant="tag">TypeScript</Badge>
|
|
22
|
-
*/
|
|
23
|
-
interface Props {
|
|
24
|
-
variant?: BadgeVariant;
|
|
25
|
-
class?: string;
|
|
26
|
-
children?: Snippet;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
let {
|
|
30
|
-
variant = "default",
|
|
31
|
-
class: className,
|
|
32
|
-
children
|
|
33
|
-
}: Props = $props();
|
|
34
|
-
|
|
35
|
-
// Map tag variant to secondary styling
|
|
36
|
-
const variantMap: Record<BadgeVariant, "default" | "secondary" | "destructive"> = {
|
|
37
|
-
default: "default",
|
|
38
|
-
secondary: "secondary",
|
|
39
|
-
destructive: "destructive",
|
|
40
|
-
tag: "secondary"
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
const shadcnVariant = $derived(variantMap[variant]);
|
|
44
|
-
</script>
|
|
45
|
-
|
|
46
|
-
<ShadcnBadge variant={shadcnVariant} class={className}>
|
|
47
|
-
{@render children?.()}
|
|
48
|
-
</ShadcnBadge>
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from "svelte";
|
|
2
|
-
type BadgeVariant = "default" | "secondary" | "destructive" | "tag";
|
|
3
|
-
/**
|
|
4
|
-
* Badge component wrapper for displaying small labels, tags, or status indicators
|
|
5
|
-
*
|
|
6
|
-
* @prop {BadgeVariant} [variant="default"] - Badge style variant (default|secondary|destructive|tag)
|
|
7
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
8
|
-
* @prop {Snippet} [children] - Badge content (typically short text)
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* <Badge variant="default">New</Badge>
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* <Badge variant="destructive">Error</Badge>
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* <Badge variant="tag">TypeScript</Badge>
|
|
18
|
-
*/
|
|
19
|
-
interface Props {
|
|
20
|
-
variant?: BadgeVariant;
|
|
21
|
-
class?: string;
|
|
22
|
-
children?: Snippet;
|
|
23
|
-
}
|
|
24
|
-
declare const Badge: import("svelte").Component<Props, {}, "">;
|
|
25
|
-
type Badge = ReturnType<typeof Badge>;
|
|
26
|
-
export default Badge;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { Button as ShadcnButton } from "./button";
|
|
3
|
-
import type { Snippet } from "svelte";
|
|
4
|
-
import type { HTMLButtonAttributes } from "svelte/elements";
|
|
5
|
-
|
|
6
|
-
type ButtonVariant = "primary" | "secondary" | "danger" | "ghost" | "link";
|
|
7
|
-
type ButtonSize = "sm" | "md" | "lg";
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Button component wrapper around shadcn-svelte Button
|
|
11
|
-
*
|
|
12
|
-
* @prop {ButtonVariant} [variant="primary"] - Button style variant (primary|secondary|danger|ghost|link)
|
|
13
|
-
* @prop {ButtonSize} [size="md"] - Button size (sm|md|lg)
|
|
14
|
-
* @prop {boolean} [disabled=false] - Whether button is disabled
|
|
15
|
-
* @prop {Function} [onclick] - Click handler function
|
|
16
|
-
* @prop {string} [href] - Optional link href (renders as anchor element)
|
|
17
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
18
|
-
* @prop {Snippet} [children] - Button content (text/icons/etc)
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* <Button variant="primary" size="lg">Save Changes</Button>
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* <Button variant="danger" onclick={() => handleDelete()}>Delete</Button>
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* <Button variant="ghost" href="/settings">Settings</Button>
|
|
28
|
-
*/
|
|
29
|
-
interface Props extends Omit<HTMLButtonAttributes, "class"> {
|
|
30
|
-
variant?: ButtonVariant;
|
|
31
|
-
size?: ButtonSize;
|
|
32
|
-
disabled?: boolean;
|
|
33
|
-
class?: string;
|
|
34
|
-
children?: Snippet;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
let {
|
|
38
|
-
variant = "primary",
|
|
39
|
-
size = "md",
|
|
40
|
-
disabled = false,
|
|
41
|
-
class: className,
|
|
42
|
-
children,
|
|
43
|
-
...restProps
|
|
44
|
-
}: Props = $props();
|
|
45
|
-
|
|
46
|
-
// Map our simplified variants to shadcn variants
|
|
47
|
-
const variantMap: Record<ButtonVariant, "default" | "secondary" | "destructive" | "ghost" | "link"> = {
|
|
48
|
-
primary: "default",
|
|
49
|
-
secondary: "secondary",
|
|
50
|
-
danger: "destructive",
|
|
51
|
-
ghost: "ghost",
|
|
52
|
-
link: "link"
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
// Map our size variants to shadcn sizes
|
|
56
|
-
const sizeMap: Record<ButtonSize, "sm" | "default" | "lg"> = {
|
|
57
|
-
sm: "sm",
|
|
58
|
-
md: "default",
|
|
59
|
-
lg: "lg"
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const shadcnVariant = $derived(variantMap[variant]);
|
|
63
|
-
const shadcnSize = $derived(sizeMap[size]);
|
|
64
|
-
</script>
|
|
65
|
-
|
|
66
|
-
<ShadcnButton
|
|
67
|
-
variant={shadcnVariant}
|
|
68
|
-
size={shadcnSize}
|
|
69
|
-
disabled={disabled}
|
|
70
|
-
class={className}
|
|
71
|
-
{...restProps}
|
|
72
|
-
>
|
|
73
|
-
{@render children?.()}
|
|
74
|
-
</ShadcnButton>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from "svelte";
|
|
2
|
-
import type { HTMLButtonAttributes } from "svelte/elements";
|
|
3
|
-
type ButtonVariant = "primary" | "secondary" | "danger" | "ghost" | "link";
|
|
4
|
-
type ButtonSize = "sm" | "md" | "lg";
|
|
5
|
-
/**
|
|
6
|
-
* Button component wrapper around shadcn-svelte Button
|
|
7
|
-
*
|
|
8
|
-
* @prop {ButtonVariant} [variant="primary"] - Button style variant (primary|secondary|danger|ghost|link)
|
|
9
|
-
* @prop {ButtonSize} [size="md"] - Button size (sm|md|lg)
|
|
10
|
-
* @prop {boolean} [disabled=false] - Whether button is disabled
|
|
11
|
-
* @prop {Function} [onclick] - Click handler function
|
|
12
|
-
* @prop {string} [href] - Optional link href (renders as anchor element)
|
|
13
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
14
|
-
* @prop {Snippet} [children] - Button content (text/icons/etc)
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* <Button variant="primary" size="lg">Save Changes</Button>
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* <Button variant="danger" onclick={() => handleDelete()}>Delete</Button>
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* <Button variant="ghost" href="/settings">Settings</Button>
|
|
24
|
-
*/
|
|
25
|
-
interface Props extends Omit<HTMLButtonAttributes, "class"> {
|
|
26
|
-
variant?: ButtonVariant;
|
|
27
|
-
size?: ButtonSize;
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
class?: string;
|
|
30
|
-
children?: Snippet;
|
|
31
|
-
}
|
|
32
|
-
declare const Button: import("svelte").Component<Props, {}, "">;
|
|
33
|
-
type Button = ReturnType<typeof Button>;
|
|
34
|
-
export default Button;
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
Card as ShadcnCard,
|
|
4
|
-
CardHeader,
|
|
5
|
-
CardTitle,
|
|
6
|
-
CardDescription,
|
|
7
|
-
CardContent,
|
|
8
|
-
CardFooter
|
|
9
|
-
} from "./card";
|
|
10
|
-
import type { Snippet } from "svelte";
|
|
11
|
-
import { cn } from "../../utils";
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Card component wrapper providing structured layout with header, content, and footer
|
|
15
|
-
*
|
|
16
|
-
* @prop {string} [title] - Card title (renders in CardHeader with CardTitle)
|
|
17
|
-
* @prop {string} [description] - Card description (renders in CardHeader with CardDescription)
|
|
18
|
-
* @prop {boolean} [hoverable=false] - Enable hover shadow effect for interactive cards
|
|
19
|
-
* @prop {Snippet} [header] - Custom header content (overrides title/description)
|
|
20
|
-
* @prop {Snippet} [footer] - Footer content (rendered in CardFooter)
|
|
21
|
-
* @prop {Snippet} [children] - Main card content (rendered in CardContent)
|
|
22
|
-
* @prop {string} [class] - Additional CSS classes for Card root
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* <Card title="Profile" description="Update your profile settings">
|
|
26
|
-
* <p>Card content here</p>
|
|
27
|
-
* </Card>
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
* <Card hoverable>
|
|
31
|
-
* {#snippet header()}
|
|
32
|
-
* <CustomHeader />
|
|
33
|
-
* {/snippet}
|
|
34
|
-
* Content here
|
|
35
|
-
* </Card>
|
|
36
|
-
*
|
|
37
|
-
* @example
|
|
38
|
-
* <Card title="Actions">
|
|
39
|
-
* {#snippet footer()}
|
|
40
|
-
* <Button>Save</Button>
|
|
41
|
-
* {/snippet}
|
|
42
|
-
* Form content
|
|
43
|
-
* </Card>
|
|
44
|
-
*/
|
|
45
|
-
interface Props {
|
|
46
|
-
title?: string;
|
|
47
|
-
description?: string;
|
|
48
|
-
hoverable?: boolean;
|
|
49
|
-
class?: string;
|
|
50
|
-
header?: Snippet;
|
|
51
|
-
footer?: Snippet;
|
|
52
|
-
children?: Snippet;
|
|
53
|
-
[key: string]: any; // Allow any additional props to be forwarded
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
let {
|
|
57
|
-
title,
|
|
58
|
-
description,
|
|
59
|
-
hoverable = false,
|
|
60
|
-
class: className,
|
|
61
|
-
header,
|
|
62
|
-
footer,
|
|
63
|
-
children,
|
|
64
|
-
...restProps
|
|
65
|
-
}: Props = $props();
|
|
66
|
-
|
|
67
|
-
const cardClass = $derived(
|
|
68
|
-
cn(
|
|
69
|
-
hoverable && "hover:shadow-lg transition-shadow cursor-pointer",
|
|
70
|
-
className
|
|
71
|
-
)
|
|
72
|
-
);
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
<ShadcnCard class={cardClass} {...restProps}>
|
|
76
|
-
{#if header || title || description}
|
|
77
|
-
<CardHeader>
|
|
78
|
-
{#if header}
|
|
79
|
-
{@render header()}
|
|
80
|
-
{:else}
|
|
81
|
-
{#if title}
|
|
82
|
-
<CardTitle>{title}</CardTitle>
|
|
83
|
-
{/if}
|
|
84
|
-
{#if description}
|
|
85
|
-
<CardDescription>{description}</CardDescription>
|
|
86
|
-
{/if}
|
|
87
|
-
{/if}
|
|
88
|
-
</CardHeader>
|
|
89
|
-
{/if}
|
|
90
|
-
|
|
91
|
-
{#if children}
|
|
92
|
-
<CardContent>
|
|
93
|
-
{@render children()}
|
|
94
|
-
</CardContent>
|
|
95
|
-
{/if}
|
|
96
|
-
|
|
97
|
-
{#if footer}
|
|
98
|
-
<CardFooter>
|
|
99
|
-
{@render footer()}
|
|
100
|
-
</CardFooter>
|
|
101
|
-
{/if}
|
|
102
|
-
</ShadcnCard>
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from "svelte";
|
|
2
|
-
/**
|
|
3
|
-
* Card component wrapper providing structured layout with header, content, and footer
|
|
4
|
-
*
|
|
5
|
-
* @prop {string} [title] - Card title (renders in CardHeader with CardTitle)
|
|
6
|
-
* @prop {string} [description] - Card description (renders in CardHeader with CardDescription)
|
|
7
|
-
* @prop {boolean} [hoverable=false] - Enable hover shadow effect for interactive cards
|
|
8
|
-
* @prop {Snippet} [header] - Custom header content (overrides title/description)
|
|
9
|
-
* @prop {Snippet} [footer] - Footer content (rendered in CardFooter)
|
|
10
|
-
* @prop {Snippet} [children] - Main card content (rendered in CardContent)
|
|
11
|
-
* @prop {string} [class] - Additional CSS classes for Card root
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* <Card title="Profile" description="Update your profile settings">
|
|
15
|
-
* <p>Card content here</p>
|
|
16
|
-
* </Card>
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* <Card hoverable>
|
|
20
|
-
* {#snippet header()}
|
|
21
|
-
* <CustomHeader />
|
|
22
|
-
* {/snippet}
|
|
23
|
-
* Content here
|
|
24
|
-
* </Card>
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* <Card title="Actions">
|
|
28
|
-
* {#snippet footer()}
|
|
29
|
-
* <Button>Save</Button>
|
|
30
|
-
* {/snippet}
|
|
31
|
-
* Form content
|
|
32
|
-
* </Card>
|
|
33
|
-
*/
|
|
34
|
-
interface Props {
|
|
35
|
-
title?: string;
|
|
36
|
-
description?: string;
|
|
37
|
-
hoverable?: boolean;
|
|
38
|
-
class?: string;
|
|
39
|
-
header?: Snippet;
|
|
40
|
-
footer?: Snippet;
|
|
41
|
-
children?: Snippet;
|
|
42
|
-
[key: string]: any;
|
|
43
|
-
}
|
|
44
|
-
declare const Card: import("svelte").Component<Props, {}, "">;
|
|
45
|
-
type Card = ReturnType<typeof Card>;
|
|
46
|
-
export default Card;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { Input as ShadcnInput } from "./input";
|
|
3
|
-
import type { HTMLInputAttributes } from "svelte/elements";
|
|
4
|
-
import { cn } from "../../utils";
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Input component wrapper with label, error handling, and validation
|
|
8
|
-
*
|
|
9
|
-
* @prop {string} [label] - Input label text (renders above input)
|
|
10
|
-
* @prop {string} [error] - Error message to display (turns border red)
|
|
11
|
-
* @prop {string|number} [value] - Input value (bindable for two-way binding)
|
|
12
|
-
* @prop {string} [placeholder] - Placeholder text
|
|
13
|
-
* @prop {string} [type="text"] - Input type (text|email|password|number)
|
|
14
|
-
* @prop {boolean} [required=false] - Whether input is required (shows asterisk)
|
|
15
|
-
* @prop {boolean} [disabled=false] - Whether input is disabled
|
|
16
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* <Input label="Email" type="email" bind:value={email} required />
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
* <Input label="Password" type="password" bind:value={password} error={passwordError} />
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* <Input placeholder="Search..." bind:value={searchQuery} />
|
|
26
|
-
*/
|
|
27
|
-
interface Props extends Omit<HTMLInputAttributes, "class"> {
|
|
28
|
-
label?: string;
|
|
29
|
-
error?: string;
|
|
30
|
-
value?: string | number;
|
|
31
|
-
placeholder?: string;
|
|
32
|
-
type?: "text" | "email" | "password" | "number";
|
|
33
|
-
required?: boolean;
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
class?: string;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
let {
|
|
39
|
-
label,
|
|
40
|
-
error,
|
|
41
|
-
value = $bindable(""),
|
|
42
|
-
placeholder,
|
|
43
|
-
type = "text",
|
|
44
|
-
required = false,
|
|
45
|
-
disabled = false,
|
|
46
|
-
class: className,
|
|
47
|
-
...restProps
|
|
48
|
-
}: Props = $props();
|
|
49
|
-
|
|
50
|
-
const inputClass = $derived(
|
|
51
|
-
cn(
|
|
52
|
-
error && "border-destructive focus-visible:ring-destructive/20",
|
|
53
|
-
className
|
|
54
|
-
)
|
|
55
|
-
);
|
|
56
|
-
</script>
|
|
57
|
-
|
|
58
|
-
<div class="flex flex-col gap-1.5">
|
|
59
|
-
{#if label}
|
|
60
|
-
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
|
61
|
-
{label}
|
|
62
|
-
{#if required}
|
|
63
|
-
<span class="text-destructive">*</span>
|
|
64
|
-
{/if}
|
|
65
|
-
</label>
|
|
66
|
-
{/if}
|
|
67
|
-
|
|
68
|
-
<ShadcnInput
|
|
69
|
-
bind:value
|
|
70
|
-
{type}
|
|
71
|
-
{placeholder}
|
|
72
|
-
{required}
|
|
73
|
-
{disabled}
|
|
74
|
-
class={inputClass}
|
|
75
|
-
{...restProps}
|
|
76
|
-
/>
|
|
77
|
-
|
|
78
|
-
{#if error}
|
|
79
|
-
<p class="text-sm text-destructive">{error}</p>
|
|
80
|
-
{/if}
|
|
81
|
-
</div>
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import type { HTMLInputAttributes } from "svelte/elements";
|
|
2
|
-
/**
|
|
3
|
-
* Input component wrapper with label, error handling, and validation
|
|
4
|
-
*
|
|
5
|
-
* @prop {string} [label] - Input label text (renders above input)
|
|
6
|
-
* @prop {string} [error] - Error message to display (turns border red)
|
|
7
|
-
* @prop {string|number} [value] - Input value (bindable for two-way binding)
|
|
8
|
-
* @prop {string} [placeholder] - Placeholder text
|
|
9
|
-
* @prop {string} [type="text"] - Input type (text|email|password|number)
|
|
10
|
-
* @prop {boolean} [required=false] - Whether input is required (shows asterisk)
|
|
11
|
-
* @prop {boolean} [disabled=false] - Whether input is disabled
|
|
12
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* <Input label="Email" type="email" bind:value={email} required />
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* <Input label="Password" type="password" bind:value={password} error={passwordError} />
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* <Input placeholder="Search..." bind:value={searchQuery} />
|
|
22
|
-
*/
|
|
23
|
-
interface Props extends Omit<HTMLInputAttributes, "class"> {
|
|
24
|
-
label?: string;
|
|
25
|
-
error?: string;
|
|
26
|
-
value?: string | number;
|
|
27
|
-
placeholder?: string;
|
|
28
|
-
type?: "text" | "email" | "password" | "number";
|
|
29
|
-
required?: boolean;
|
|
30
|
-
disabled?: boolean;
|
|
31
|
-
class?: string;
|
|
32
|
-
}
|
|
33
|
-
declare const Input: import("svelte").Component<Props, {}, "value">;
|
|
34
|
-
type Input = ReturnType<typeof Input>;
|
|
35
|
-
export default Input;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { Skeleton as ShadcnSkeleton } from "./skeleton";
|
|
3
|
-
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Skeleton component wrapper for loading placeholders
|
|
7
|
-
* Creates animated gray rectangles that indicate loading content
|
|
8
|
-
*
|
|
9
|
-
* @prop {string} [class] - CSS classes to customize size/shape (e.g., "h-12 w-12 rounded-full")
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* <Skeleton class="h-4 w-full" />
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* <Skeleton class="h-12 w-12 rounded-full" />
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* <div class="flex flex-col gap-2">
|
|
19
|
-
* <Skeleton class="h-6 w-3/4" />
|
|
20
|
-
* <Skeleton class="h-4 w-full" />
|
|
21
|
-
* <Skeleton class="h-4 w-5/6" />
|
|
22
|
-
* </div>
|
|
23
|
-
*/
|
|
24
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
25
|
-
class?: string;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
let { class: className, ...restProps }: Props = $props();
|
|
29
|
-
</script>
|
|
30
|
-
|
|
31
|
-
<ShadcnSkeleton class={className} {...restProps} />
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from "svelte/elements";
|
|
2
|
-
/**
|
|
3
|
-
* Skeleton component wrapper for loading placeholders
|
|
4
|
-
* Creates animated gray rectangles that indicate loading content
|
|
5
|
-
*
|
|
6
|
-
* @prop {string} [class] - CSS classes to customize size/shape (e.g., "h-12 w-12 rounded-full")
|
|
7
|
-
*
|
|
8
|
-
* @example
|
|
9
|
-
* <Skeleton class="h-4 w-full" />
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* <Skeleton class="h-12 w-12 rounded-full" />
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* <div class="flex flex-col gap-2">
|
|
16
|
-
* <Skeleton class="h-6 w-3/4" />
|
|
17
|
-
* <Skeleton class="h-4 w-full" />
|
|
18
|
-
* <Skeleton class="h-4 w-5/6" />
|
|
19
|
-
* </div>
|
|
20
|
-
*/
|
|
21
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
22
|
-
class?: string;
|
|
23
|
-
}
|
|
24
|
-
declare const Skeleton: import("svelte").Component<Props, {}, "">;
|
|
25
|
-
type Skeleton = ReturnType<typeof Skeleton>;
|
|
26
|
-
export default Skeleton;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { Textarea as ShadcnTextarea } from "./textarea";
|
|
3
|
-
import type { HTMLTextareaAttributes } from "svelte/elements";
|
|
4
|
-
import { cn } from "../../utils";
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Textarea component wrapper with label, error handling, and validation
|
|
8
|
-
*
|
|
9
|
-
* @prop {string} [label] - Textarea label text (renders above textarea)
|
|
10
|
-
* @prop {string} [error] - Error message to display (turns border red)
|
|
11
|
-
* @prop {string} [value] - Textarea value (bindable for two-way binding)
|
|
12
|
-
* @prop {string} [placeholder] - Placeholder text
|
|
13
|
-
* @prop {number} [rows] - Number of visible text rows
|
|
14
|
-
* @prop {boolean} [required=false] - Whether textarea is required (shows asterisk)
|
|
15
|
-
* @prop {boolean} [disabled=false] - Whether textarea is disabled
|
|
16
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* <Textarea label="Description" bind:value={description} required />
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
* <Textarea label="Notes" bind:value={notes} rows={5} error={notesError} />
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* <Textarea placeholder="Enter your message..." bind:value={message} />
|
|
26
|
-
*/
|
|
27
|
-
interface Props extends Omit<HTMLTextareaAttributes, "class"> {
|
|
28
|
-
label?: string;
|
|
29
|
-
error?: string;
|
|
30
|
-
value?: string;
|
|
31
|
-
placeholder?: string;
|
|
32
|
-
rows?: number;
|
|
33
|
-
required?: boolean;
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
class?: string;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
let {
|
|
39
|
-
label,
|
|
40
|
-
error,
|
|
41
|
-
value = $bindable(""),
|
|
42
|
-
placeholder,
|
|
43
|
-
rows,
|
|
44
|
-
required = false,
|
|
45
|
-
disabled = false,
|
|
46
|
-
class: className,
|
|
47
|
-
...restProps
|
|
48
|
-
}: Props = $props();
|
|
49
|
-
|
|
50
|
-
const textareaClass = $derived(
|
|
51
|
-
cn(
|
|
52
|
-
error && "border-destructive focus-visible:ring-destructive/20",
|
|
53
|
-
className
|
|
54
|
-
)
|
|
55
|
-
);
|
|
56
|
-
</script>
|
|
57
|
-
|
|
58
|
-
<div class="flex flex-col gap-1.5">
|
|
59
|
-
{#if label}
|
|
60
|
-
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
|
61
|
-
{label}
|
|
62
|
-
{#if required}
|
|
63
|
-
<span class="text-destructive">*</span>
|
|
64
|
-
{/if}
|
|
65
|
-
</label>
|
|
66
|
-
{/if}
|
|
67
|
-
|
|
68
|
-
<ShadcnTextarea
|
|
69
|
-
bind:value
|
|
70
|
-
{placeholder}
|
|
71
|
-
{rows}
|
|
72
|
-
{required}
|
|
73
|
-
{disabled}
|
|
74
|
-
class={textareaClass}
|
|
75
|
-
{...restProps}
|
|
76
|
-
/>
|
|
77
|
-
|
|
78
|
-
{#if error}
|
|
79
|
-
<p class="text-sm text-destructive">{error}</p>
|
|
80
|
-
{/if}
|
|
81
|
-
</div>
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import type { HTMLTextareaAttributes } from "svelte/elements";
|
|
2
|
-
/**
|
|
3
|
-
* Textarea component wrapper with label, error handling, and validation
|
|
4
|
-
*
|
|
5
|
-
* @prop {string} [label] - Textarea label text (renders above textarea)
|
|
6
|
-
* @prop {string} [error] - Error message to display (turns border red)
|
|
7
|
-
* @prop {string} [value] - Textarea value (bindable for two-way binding)
|
|
8
|
-
* @prop {string} [placeholder] - Placeholder text
|
|
9
|
-
* @prop {number} [rows] - Number of visible text rows
|
|
10
|
-
* @prop {boolean} [required=false] - Whether textarea is required (shows asterisk)
|
|
11
|
-
* @prop {boolean} [disabled=false] - Whether textarea is disabled
|
|
12
|
-
* @prop {string} [class] - Additional CSS classes to apply
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* <Textarea label="Description" bind:value={description} required />
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* <Textarea label="Notes" bind:value={notes} rows={5} error={notesError} />
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* <Textarea placeholder="Enter your message..." bind:value={message} />
|
|
22
|
-
*/
|
|
23
|
-
interface Props extends Omit<HTMLTextareaAttributes, "class"> {
|
|
24
|
-
label?: string;
|
|
25
|
-
error?: string;
|
|
26
|
-
value?: string;
|
|
27
|
-
placeholder?: string;
|
|
28
|
-
rows?: number;
|
|
29
|
-
required?: boolean;
|
|
30
|
-
disabled?: boolean;
|
|
31
|
-
class?: string;
|
|
32
|
-
}
|
|
33
|
-
declare const Textarea: import("svelte").Component<Props, {}, "value">;
|
|
34
|
-
type Textarea = ReturnType<typeof Textarea>;
|
|
35
|
-
export default Textarea;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import { type VariantProps, tv } from "tailwind-variants";
|
|
3
|
-
|
|
4
|
-
export const badgeVariants = tv({
|
|
5
|
-
base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
|
|
6
|
-
variants: {
|
|
7
|
-
variant: {
|
|
8
|
-
default:
|
|
9
|
-
"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
|
|
10
|
-
secondary:
|
|
11
|
-
"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
|
|
12
|
-
destructive:
|
|
13
|
-
"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
|
|
14
|
-
outline: "text-foreground",
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
defaultVariants: {
|
|
18
|
-
variant: "default",
|
|
19
|
-
},
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<script lang="ts">
|
|
26
|
-
import type { WithElementRef } from "bits-ui";
|
|
27
|
-
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
28
|
-
import { cn } from "../../../utils";
|
|
29
|
-
|
|
30
|
-
let {
|
|
31
|
-
ref = $bindable(null),
|
|
32
|
-
href,
|
|
33
|
-
class: className,
|
|
34
|
-
variant = "default",
|
|
35
|
-
children,
|
|
36
|
-
...restProps
|
|
37
|
-
}: WithElementRef<HTMLAnchorAttributes> & {
|
|
38
|
-
variant?: BadgeVariant;
|
|
39
|
-
} = $props();
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
<svelte:element
|
|
43
|
-
this={href ? "a" : "span"}
|
|
44
|
-
bind:this={ref}
|
|
45
|
-
{href}
|
|
46
|
-
class={cn(badgeVariants({ variant }), className)}
|
|
47
|
-
{...restProps}
|
|
48
|
-
>
|
|
49
|
-
{@render children?.()}
|
|
50
|
-
</svelte:element>
|