14 |
25 |
--------------------------------------------------------------------------------
/src/lib/components/docs/examples/index.ts:
--------------------------------------------------------------------------------
1 | import ReviewForm from './review-form.svelte';
2 | import ConfigureDevice from './configure-device.svelte';
3 | import PhoneNumberSetting from './phone-number-setting.svelte';
4 | import CodeBlock from './code-block.svelte';
5 | import EditorFileTree from './editor-file-tree.svelte';
6 | import Terminal from './terminal.svelte';
7 | import FileDropZone from './file-drop-zone.svelte';
8 | import PmCommand from './pm-command.svelte';
9 |
10 | export {
11 | ReviewForm,
12 | PmCommand,
13 | ConfigureDevice,
14 | PhoneNumberSetting,
15 | CodeBlock,
16 | EditorFileTree,
17 | Terminal,
18 | FileDropZone
19 | };
20 |
--------------------------------------------------------------------------------
/src/lib/components/docs/examples/phone-number-setting.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
15 |
23 |
16 |
21 | 26 | {@render children?.()} 27 |
28 | -------------------------------------------------------------------------------- /src/lib/components/icons/index.ts: -------------------------------------------------------------------------------- 1 | import type { HTMLAttributes } from 'svelte/elements'; 2 | import GitHub from './github.svelte'; 3 | import Svelte from './svelte.svelte'; 4 | import CSS from './css.svelte'; 5 | import MCP from './mcp.svelte'; 6 | import TypeScript from './typescript.svelte'; 7 | 8 | export interface Props extends HTMLAttributes
23 | {@render children?.()}
24 |
25 |
18 | +{plus}
19 |
20 |
--------------------------------------------------------------------------------
/src/lib/components/ui/avatar-group/avatar-group-member.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
20 | {@render children?.()}
21 |
22 |
--------------------------------------------------------------------------------
/src/lib/components/ui/avatar-group/index.ts:
--------------------------------------------------------------------------------
1 | import Root from './avatar-group.svelte';
2 | import Member from './avatar-group-member.svelte';
3 | import Etc from './avatar-group-etc.svelte';
4 |
5 | import { Fallback, Image } from '$lib/components/ui/avatar';
6 |
7 | export { Root, Member, Etc, Image as MemberImage, Fallback as MemberFallback };
8 |
--------------------------------------------------------------------------------
/src/lib/components/ui/avatar/avatar-fallback.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-content.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | {@render children?.()}
15 |
16 |
--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-description.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 | 19 | {@render children?.()} 20 |
21 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-footer.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-header.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
22 | {@render children?.()}
23 |
24 |
--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-title.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/card/card.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
22 | {@render children?.()}
23 |
24 |
--------------------------------------------------------------------------------
/src/lib/components/ui/card/index.ts:
--------------------------------------------------------------------------------
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 |
9 | export {
10 | Root,
11 | Content,
12 | Description,
13 | Footer,
14 | Header,
15 | Title,
16 | Action,
17 | //
18 | Root as Card,
19 | Content as CardContent,
20 | Description as CardDescription,
21 | Footer as CardFooter,
22 | Header as CardHeader,
23 | Title as CardTitle,
24 | Action as CardAction
25 | };
26 |
--------------------------------------------------------------------------------
/src/lib/components/ui/chat/chat-bubble-avatar.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
21 | {#if typing}
22 |
29 |
--------------------------------------------------------------------------------
/src/lib/components/ui/chat/chat-bubble.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
23 |
25 | {:else}
26 | {@render children?.()}
27 | {/if}
28 |
16 | {@render children?.()}
17 |
18 |
--------------------------------------------------------------------------------
/src/lib/components/ui/chat/index.ts:
--------------------------------------------------------------------------------
1 | import Bubble from './chat-bubble.svelte';
2 | import BubbleMessage from './chat-bubble-message.svelte';
3 | import BubbleAvatar from './chat-bubble-avatar.svelte';
4 | import List from './chat-list.svelte';
5 | import * as Avatar from '$lib/components/ui/avatar';
6 |
7 | const BubbleAvatarImage = Avatar.Image;
8 | const BubbleAvatarFallback = Avatar.Fallback;
9 |
10 | export { List, Bubble, BubbleMessage, BubbleAvatar, BubbleAvatarImage, BubbleAvatarFallback };
11 |
--------------------------------------------------------------------------------
/src/lib/components/ui/chat/loading-dots.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | {#each { length: 3 } as _, i (i)}
11 |
12 | {/each}
13 |
14 |
15 |
43 |
--------------------------------------------------------------------------------
/src/lib/components/ui/code/index.ts:
--------------------------------------------------------------------------------
1 | import Code from './code.svelte';
2 |
3 | export { Code };
4 |
--------------------------------------------------------------------------------
/src/lib/components/ui/code/shiki.ts:
--------------------------------------------------------------------------------
1 | // Follows the best practices established in https://shiki.matsu.io/guide/best-performance
2 | import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
3 | import { createHighlighterCore } from 'shiki/core';
4 |
5 | const bundledLanguages = {
6 | bash: () => import('@shikijs/langs/bash'),
7 | diff: () => import('@shikijs/langs/diff'),
8 | javascript: () => import('@shikijs/langs/javascript'),
9 | json: () => import('@shikijs/langs/json'),
10 | svelte: () => import('@shikijs/langs/svelte'),
11 | typescript: () => import('@shikijs/langs/typescript')
12 | };
13 |
14 | /** The languages configured for the highlighter */
15 | export type SupportedLanguage = keyof typeof bundledLanguages;
16 |
17 | /** A preloaded highlighter instance. */
18 | export const highlighter = createHighlighterCore({
19 | themes: [
20 | import('@shikijs/themes/github-light-default'),
21 | import('@shikijs/themes/github-dark-default')
22 | ],
23 | langs: Object.entries(bundledLanguages).map(([_, lang]) => lang),
24 | engine: createJavaScriptRegexEngine()
25 | });
26 |
--------------------------------------------------------------------------------
/src/lib/components/ui/collapsible/collapsible-content.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
15 |
27 |
--------------------------------------------------------------------------------
/src/lib/components/ui/command/command-item.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-header.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-overlay.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/drawer-header.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/drawer-nested.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
23 | {@render children?.()}
24 |
25 |
--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/field-set/field-set-footer.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/field-set/field-set-title.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
24 | {@render children?.()}
25 |
26 |
--------------------------------------------------------------------------------
/src/lib/components/ui/field-set/field-set.svelte:
--------------------------------------------------------------------------------
1 |
25 |
26 |
27 | {@render children?.()}
28 |
29 |
--------------------------------------------------------------------------------
/src/lib/components/ui/field-set/index.ts:
--------------------------------------------------------------------------------
1 | import Root from './field-set.svelte';
2 | import Content from './field-set-content.svelte';
3 | import Footer from './field-set-footer.svelte';
4 | import Title from './field-set-title.svelte';
5 |
6 | export { Root, Content, Footer, Title };
7 |
--------------------------------------------------------------------------------
/src/lib/components/ui/file-drop-zone/index.ts:
--------------------------------------------------------------------------------
1 | import FileDropZone, {
2 | type FileRejectedReason,
3 | type FileDropZoneProps
4 | } from './file-drop-zone.svelte';
5 |
6 | export const displaySize = (bytes: number): string => {
7 | if (bytes < KILOBYTE) return `${bytes.toFixed(0)} B`;
8 |
9 | if (bytes < MEGABYTE) return `${(bytes / KILOBYTE).toFixed(0)} KB`;
10 |
11 | if (bytes < GIGABYTE) return `${(bytes / MEGABYTE).toFixed(0)} MB`;
12 |
13 | return `${(bytes / GIGABYTE).toFixed(0)} GB`;
14 | };
15 |
16 | // Utilities for working with file sizes
17 | export const BYTE = 1;
18 | export const KILOBYTE = 1024;
19 | export const MEGABYTE = 1024 * KILOBYTE;
20 | export const GIGABYTE = 1024 * MEGABYTE;
21 |
22 | // utilities for limiting accepted files
23 | export const ACCEPT_IMAGE = 'image/*';
24 | export const ACCEPT_VIDEO = 'video/*';
25 | export const ACCEPT_AUDIO = 'audio/*';
26 |
27 | export { FileDropZone, type FileRejectedReason, type FileDropZoneProps };
28 |
--------------------------------------------------------------------------------
/src/lib/components/ui/image-cropper/image-cropper-cancel.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
20 |
--------------------------------------------------------------------------------
/src/lib/components/ui/image-cropper/image-cropper-controls.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/src/lib/components/ui/image-cropper/image-cropper-crop.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
20 |
--------------------------------------------------------------------------------
/src/lib/components/ui/image-cropper/image-cropper-cropper.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
17 |
26 |
--------------------------------------------------------------------------------
/src/lib/components/ui/image-cropper/image-cropper-dialog.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
22 | {@render children?.()}
23 |
24 |
15 |
22 |
--------------------------------------------------------------------------------
/src/lib/components/ui/prev-next/previous.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
23 |
--------------------------------------------------------------------------------
/src/lib/components/ui/progress/index.ts:
--------------------------------------------------------------------------------
1 | import Root from './progress.svelte';
2 |
3 | export {
4 | Root,
5 | //
6 | Root as Progress
7 | };
8 |
--------------------------------------------------------------------------------
/src/lib/components/ui/progress/progress.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
16 | {@render previous?.()}
17 |
18 |
19 | {@render next?.()}
20 |
21 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-header.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-overlay.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
23 | {@render children?.()}
24 |
25 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-footer.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
20 | {@render children?.()}
21 |
22 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-group-content.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
20 | {@render children?.()}
21 |
22 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-group.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
20 | {@render children?.()}
21 |
22 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-header.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
20 | {@render children?.()}
21 |
22 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-input.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
22 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-inset.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
28 | {@render children?.()}
29 |
30 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-menu-item.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
27 | {#if showIcon}
28 |
37 |
--------------------------------------------------------------------------------
/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 | -
24 | {@render children?.()}
25 |
-
20 | {@render children?.()}
21 |
18 |
19 | {value}
20 |
21 |
24 |
25 |
--------------------------------------------------------------------------------
/src/lib/components/ui/tags-input/types.ts:
--------------------------------------------------------------------------------
1 | import type { HTMLInputAttributes } from 'svelte/elements';
2 |
3 | export interface TagsInputProps extends HTMLInputAttributes {
4 | value?: string[];
5 | class?: string;
6 | placeholder?: string;
7 | disabled?: boolean;
8 | validate?: (val: string, tags: string[]) => string | undefined;
9 | }
10 |
--------------------------------------------------------------------------------
/src/lib/components/ui/terminal/index.ts:
--------------------------------------------------------------------------------
1 | import Loop from './terminal-loop.svelte';
2 | import Root from './terminal.svelte';
3 | import TypingAnimation from './terminal-typing-animation.svelte';
4 | import AnimatedSpan from './terminal-animated-span.svelte';
5 | import Loading from './terminal-loading.svelte';
6 |
7 | export { Loop, Root, TypingAnimation, AnimatedSpan, Loading };
8 |
--------------------------------------------------------------------------------
/src/lib/components/ui/terminal/terminal-loop.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 | {#key loopIndex}
26 | {@render children?.()}
27 | {/key}
28 |
--------------------------------------------------------------------------------
/src/lib/components/ui/terminal/terminal-typing-animation.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 | {#if playAnimation}
24 | animation.onComplete?.()
29 | }}
30 | >
31 | {@render children?.()}
32 |
33 | {/if}
34 |
--------------------------------------------------------------------------------
/src/lib/components/ui/terminal/terminal.svelte:
--------------------------------------------------------------------------------
1 |
28 |
29 | -
17 | {#each toc as heading, i (i)}
18 |
- 23 | {#if heading.id} 24 | 25 | {heading.label} 26 | 27 | {:else} 28 | {heading.label} 29 | {/if} 30 | 31 | {#if heading.children.length > 0} 32 |
14 | {@render children?.()}
15 |
16 |
--------------------------------------------------------------------------------
/src/lib/components/ui/window/index.ts:
--------------------------------------------------------------------------------
1 | import Window from './window.svelte';
2 |
3 | export { Window };
4 |
--------------------------------------------------------------------------------
/src/lib/components/ui/window/window.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
24 |
--------------------------------------------------------------------------------
/src/lib/context.ts:
--------------------------------------------------------------------------------
1 | import { Context } from 'runed';
2 | import type { UseBoolean } from './hooks/use-boolean.svelte';
3 |
4 | export const commandContext = new Context
14 |
20 |
15 |
16 |
17 |
18 |
19 |
21 | {@render children?.()}
22 |
23 |
19 |
The same old button you know from shadcn-svelte with a few extra touches.
9 |
20 | You can also pass a promise to
10 |
12 |
--------------------------------------------------------------------------------
/src/routes/components/code/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import NoLineNumbers from './no-line-numbers.svelte';
4 | import noLineNumbersRaw from './no-line-numbers.svelte?raw';
5 | import Variants from './variants.svelte';
6 | import variantsRaw from './variants.svelte?raw';
7 | import HighlightLines from './highlight-lines.svelte';
8 | import highlightLinesRaw from './highlight-lines.svelte?raw';
9 | import Overflow from './overflow.svelte';
10 | import overflowRaw from './overflow.svelte?raw';
11 |
12 | const examples = {
13 | basic: {
14 | code: basicRaw,
15 | Component: Basic
16 | },
17 | noLineNumbers: {
18 | code: noLineNumbersRaw,
19 | Component: NoLineNumbers
20 | },
21 | variants: {
22 | code: variantsRaw,
23 | Component: Variants
24 | },
25 | highlightLines: {
26 | code: highlightLinesRaw,
27 | Component: HighlightLines
28 | },
29 | overflow: {
30 | code: overflowRaw,
31 | Component: Overflow
32 | }
33 | };
34 |
35 | export { examples };
36 |
--------------------------------------------------------------------------------
/src/routes/components/code/highlight-lines.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
31 |
--------------------------------------------------------------------------------
/src/routes/components/code/no-line-numbers.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/code/overflow.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
9 |
--------------------------------------------------------------------------------
/src/routes/components/code/variants.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
23 |
--------------------------------------------------------------------------------
/src/routes/components/copy-button/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
19 | Button
20 | `}
21 | />
22 |
9 |
10 |
11 |
16 |
17 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/routes/components/field-set/destructive.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
12 |
13 |
14 |
15 |
18 | Save your username.
19 |
20 |
21 |
9 |
10 |
11 |
16 |
17 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/routes/components/field-set/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import Destructive from './destructive.svelte';
4 | import destructiveRaw from './destructive.svelte?raw';
5 |
6 | const examples = {
7 | basic: {
8 | code: basicRaw,
9 | Component: Basic
10 | },
11 | destructive: {
12 | code: destructiveRaw,
13 | Component: Destructive
14 | }
15 | };
16 |
17 | export { examples };
18 |
--------------------------------------------------------------------------------
/src/routes/components/file-drop-zone/+page.server.ts:
--------------------------------------------------------------------------------
1 | import { fail, message, superValidate } from 'sveltekit-superforms';
2 | import { valibot } from 'sveltekit-superforms/adapters';
3 | import { schema } from './schema';
4 |
5 | export const load = async () => {
6 | return {
7 | form: await superValidate({}, valibot(schema))
8 | };
9 | };
10 |
11 | export const actions = {
12 | default: async ({ request }) => {
13 | const form = await superValidate(request, valibot(schema));
14 |
15 | if (!form.valid) {
16 | return fail(400, { form });
17 | }
18 |
19 | return message(form, 'Posted!');
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/src/routes/components/file-drop-zone/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import Form from './form.svelte';
4 | import formRaw from './form.svelte?raw';
5 | import schemaRaw from './schema.ts?raw';
6 |
7 | const examples = {
8 | basic: {
9 | code: basicRaw,
10 | Component: Basic
11 | },
12 | form: {
13 | code: formRaw,
14 | Component: Form
15 | },
16 | schema: schemaRaw
17 | };
18 |
19 | export { examples };
20 |
--------------------------------------------------------------------------------
/src/routes/components/file-drop-zone/schema.ts:
--------------------------------------------------------------------------------
1 | import * as v from 'valibot';
2 | import { MEGABYTE } from '$lib/components/ui/file-drop-zone';
3 |
4 | export const schema = v.object({
5 | attachments: v.array(v.pipe(v.file(), v.maxSize(MEGABYTE * 2)))
6 | });
7 |
8 | export type Schema = v.InferInput
12 |
13 |
14 |
15 |
18 | Rename your project.
19 |
20 |
21 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/ipv4address-input/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import Placeholder from './placeholder.svelte';
4 | import placeholderRaw from './placeholder.svelte?raw';
5 | import Reactive from './reactive.svelte';
6 | import reactiveRaw from './reactive.svelte?raw';
7 | import Valid from './valid.svelte';
8 | import validRaw from './valid.svelte?raw';
9 |
10 | const examples = {
11 | basic: {
12 | code: basicRaw,
13 | Component: Basic
14 | },
15 | placeholder: {
16 | code: placeholderRaw,
17 | Component: Placeholder
18 | },
19 | reactive: {
20 | code: reactiveRaw,
21 | Component: Reactive
22 | },
23 | valid: {
24 | code: validRaw,
25 | Component: Valid
26 | }
27 | };
28 |
29 | export { examples };
30 |
--------------------------------------------------------------------------------
/src/routes/components/ipv4address-input/placeholder.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/ipv4address-input/reactive.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
14 |
--------------------------------------------------------------------------------
/src/routes/components/ipv4address-input/valid.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
19 |
--------------------------------------------------------------------------------
/src/routes/components/kbd/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
6 | A
7 | B
8 | C
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/kbd/variants.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
22 |
--------------------------------------------------------------------------------
/src/routes/components/language-switcher/+page.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
7 | A
8 | B
9 | C
10 |
11 |
12 | A
13 | B
14 | C
15 |
16 |
17 | A
18 | B
19 | C
20 |
21 | 22 | Example of how to integrate with 27 | ParaglideJS 28 | : 29 |
30 |
28 | {
32 | if (isLocale(code)) setLocale(code);
33 | }}
34 | />
35 |
36 |
38 |
--------------------------------------------------------------------------------
/src/routes/components/language-switcher/variants.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 | {m.example_message()}
37 |
15 |
24 |
--------------------------------------------------------------------------------
/src/routes/components/link/basic.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
18 | import { Link } from '$lib/components/ui/link';
19 | \<\/script\>
20 |
21 | Hello`}
22 | />
23 | 6 | Crafted by 7 | huntabyte, enhanced by 8 | ieedan. 9 |
10 | -------------------------------------------------------------------------------- /src/routes/components/link/examples.ts: -------------------------------------------------------------------------------- 1 | import Basic from './basic.svelte'; 2 | import basicRaw from './basic.svelte?raw'; 3 | 4 | const examples = { 5 | basic: { 6 | code: basicRaw, 7 | Component: Basic 8 | } 9 | }; 10 | 11 | export { examples }; 12 | -------------------------------------------------------------------------------- /src/routes/components/modal/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |The modal component can be composed just like a dialog or drawer component.
15 |
16 |
34 |
--------------------------------------------------------------------------------
/src/routes/components/modal/basic.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
19 | import * as Modal from "$lib/components/ui/modal";
20 | \<\/script\>
21 |
22 |
23 |
25 |
26 |
29 |
31 | `}
32 | />
33 |
18 |
27 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | Allows you to provide a date in natural language and helps by giving suggestions.
9 |
15 | You may want to limit what suggestions are actually presented to the user so that they don't
16 | schedule an appointment 30 years from now. You can do this with the
17 |
7 |
9 | toast.success(label, {
10 | description: `${date.toDateString()} ${date.toLocaleTimeString()}`
11 | })}
12 | />
13 |
14 |
--------------------------------------------------------------------------------
/src/routes/components/nlp-date-input/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import MinMax from './min-max.svelte';
4 | import minMaxRaw from './min-max.svelte?raw';
5 |
6 | const examples = {
7 | basic: {
8 | code: basicRaw,
9 | Component: Basic
10 | },
11 | minMax: {
12 | code: minMaxRaw,
13 | Component: MinMax
14 | }
15 | };
16 |
17 | export { examples };
18 |
--------------------------------------------------------------------------------
/src/routes/components/nlp-date-input/min-max.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
14 | toast.success(label, {
15 | description: `${date.toDateString()} ${date.toLocaleTimeString()}`
16 | })}
17 | />
18 |
19 |
--------------------------------------------------------------------------------
/src/routes/components/phone-input/basic.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/phone-input/custom-ordering.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | {
11 | if (a.iso2 == 'US') return -1;
12 | if (b.iso2 == 'US') return 1;
13 | if (a.iso2 == 'CN') return -1;
14 | if (b.iso2 == 'CN') return 1;
15 |
16 | return a.name.localeCompare(b.name);
17 | }}
18 | />
19 |
20 |
--------------------------------------------------------------------------------
/src/routes/components/phone-input/default-country.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/phone-input/default-value.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/phone-input/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import DefaultCountry from './default-country.svelte';
4 | import defaultCountryRaw from './default-country.svelte?raw';
5 | import DefaultValue from './default-value.svelte';
6 | import defaultValueRaw from './default-value.svelte?raw';
7 | import CustomOrdering from './custom-ordering.svelte';
8 | import customOrderingRaw from './custom-ordering.svelte?raw';
9 |
10 | const examples = {
11 | basic: {
12 | code: basicRaw,
13 | Component: Basic
14 | },
15 | defaultCountry: {
16 | code: defaultCountryRaw,
17 | Component: DefaultCountry
18 | },
19 | defaultValue: {
20 | code: defaultValueRaw,
21 | Component: DefaultValue
22 | },
23 | customOrdering: {
24 | code: customOrderingRaw,
25 | Component: CustomOrdering
26 | }
27 | };
28 |
29 | export { examples };
30 |
--------------------------------------------------------------------------------
/src/routes/components/pm-command/basic.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/routes/components/pm-command/customize-agents.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
11 |
--------------------------------------------------------------------------------
/src/routes/components/star-rating/basic.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {#snippet children({ items })}
10 | {#each items as item (item.index)}
11 |
15 | Rating is {value}
16 |
17 |
--------------------------------------------------------------------------------
/src/routes/components/star-rating/custom-color.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
8 |
29 |
--------------------------------------------------------------------------------
/src/routes/components/star-rating/readonly.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
9 |
10 | {#snippet children({ items })}
11 | {#each items as item (item.index)}
12 |
16 | Rating is {value}
17 |
18 |
19 | تقييم بالنجوم (RTL)
20 |
21 | {#snippet children({ items })}
22 | {#each items as item (item.index)}
23 |
27 |
28 |
8 |
10 |
--------------------------------------------------------------------------------
/src/routes/components/tags-input/custom-validate.ts:
--------------------------------------------------------------------------------
1 | import type { TagsInputProps } from '$lib/components/ui/tags-input/types';
2 |
3 | export const customValidate: TagsInputProps['validate'] = (val, tags) => {
4 | // trim and convert to lowercase
5 | const transformed = val.trim().toLowerCase();
6 |
7 | // disallow empties
8 | if (transformed.length === 0) return undefined;
9 |
10 | // disallow duplicates
11 | if (tags.find((t) => transformed === t.toLowerCase())) return undefined;
12 |
13 | return transformed;
14 | };
15 |
--------------------------------------------------------------------------------
/src/routes/components/tags-input/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import customValidateCode from './custom-validate?raw';
4 | import Lowercase from './lowercase.svelte';
5 | import lowercaseRaw from './lowercase.svelte?raw';
6 |
7 | const examples = {
8 | basic: {
9 | code: basicRaw,
10 | Component: Basic
11 | },
12 | customValidateCode,
13 | lowercase: {
14 | code: lowercaseRaw,
15 | Component: Lowercase
16 | }
17 | };
18 |
19 | export { examples };
20 |
--------------------------------------------------------------------------------
/src/routes/components/tags-input/lowercase.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
11 |
--------------------------------------------------------------------------------
/src/routes/components/terminal/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import Loop from './loop.svelte';
4 | import loopRaw from './loop.svelte?raw';
5 |
6 | const examples = {
7 | basic: {
8 | code: basicRaw,
9 | Component: Basic
10 | },
11 | loop: {
12 | code: loopRaw,
13 | Component: Loop
14 | }
15 | };
16 |
17 | export { examples };
18 |
--------------------------------------------------------------------------------
/src/routes/components/theme-selector/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
15 |
24 |
18 | import * as Toc from '$lib/components/ui/toc';
19 | \<\/script\>
20 |
21 |
26 |
40 |
--------------------------------------------------------------------------------
/src/routes/components/toc/basic.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
29 | import * as Toc from '$lib/components/ui/toc';
30 |
31 | const toc = new UseToc();
32 | \<\/script\>
33 |
34 |
35 |
36 |
37 | `}
38 | />
39 | 19 | If you are using custom icons in a project we recommend you wrap the folder/file components with 20 | the custom icons: 21 |
22 |
6 |
7 |
8 |
9 |
12 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/routes/components/tree-view/examples.ts:
--------------------------------------------------------------------------------
1 | import Basic from './basic.svelte';
2 | import basicRaw from './basic.svelte?raw';
3 | import CustomIcons from './custom-icons.svelte';
4 | import customIconsRaw from './custom-icons.svelte?raw';
5 | import treeViewFileCustomRaw from './tree-view-file-custom.svelte?raw';
6 |
7 | const examples = {
8 | basic: {
9 | code: basicRaw,
10 | Component: Basic
11 | },
12 | customIcons: {
13 | code: customIconsRaw,
14 | Component: CustomIcons
15 | },
16 | customFileComponentCode: treeViewFileCustomRaw
17 | };
18 |
19 | export { examples };
20 |
--------------------------------------------------------------------------------
/src/routes/components/tree-view/tree-view-file-custom.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | An awesome styled window component.
8 |Create a container that automatically scrolls to the bottom.
10 |
14 | import { UseAutoScroll } from '$lib/hooks/use-auto-scroll.svelte';
15 |
16 | let { children } = $props();
17 |
18 | const autoScroll = new UseAutoScroll();
19 | \<\/script\>
20 |
21 |
22 |
23 | {@render children?.()}
24 |
25 | {#if !autoScroll.isAtBottom}
26 |
29 | {/if}
30 | `}
31 | />
32 |
--------------------------------------------------------------------------------
/src/routes/hooks/use-promise/basic.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 | Usage
9 | Generate a table of contents using the content of the page.
10 |
14 | const toc = new UseToc();
15 | \<\/script\>
16 |
17 |
18 | Installation
19 | CLI
20 | Manual
21 | Usage
22 | `}
23 | />
24 |
--------------------------------------------------------------------------------
/static/dark.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ieedan/shadcn-svelte-extras/fd06d9df74e6a1a25ff1ef00b17f5dd9cf1b92fd/static/favicon.png
--------------------------------------------------------------------------------
/static/favicon.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/static/light.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/static/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ieedan/shadcn-svelte-extras/fd06d9df74e6a1a25ff1ef00b17f5dd9cf1b92fd/static/og.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-vercel';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://svelte.dev/docs/kit/integrations
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | adapter: adapter()
12 | }
13 | };
14 |
15 | export default config;
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | },
14 | "exclude": ["src/lib/paraglide/**"]
15 | // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
16 | // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
17 | //
18 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
19 | // from the referenced tsconfig.json - TypeScript does not merge them in
20 | }
21 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { paraglideVitePlugin } from '@inlang/paraglide-js';
2 | import { sveltekit } from '@sveltejs/kit/vite';
3 | import { defineConfig } from 'vite';
4 | import tailwindcss from '@tailwindcss/vite';
5 |
6 | export default defineConfig({
7 | plugins: [
8 | tailwindcss(),
9 | paraglideVitePlugin({
10 | project: './project.inlang',
11 | outdir: './src/lib/paraglide',
12 | strategy: ['url', 'cookie', 'baseLocale'],
13 | disableAsyncLocalStorage: true
14 | }),
15 | sveltekit()
16 | ]
17 | });
18 |
--------------------------------------------------------------------------------