···11+# sv
22+33+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
44+55+## Creating a project
66+77+If you're seeing this, you've probably already done this step. Congrats!
88+99+```bash
1010+# create a new project in the current directory
1111+npx sv create
1212+1313+# create a new project in my-app
1414+npx sv create my-app
1515+```
1616+1717+## Developing
1818+1919+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
2020+2121+```bash
2222+npm run dev
2323+2424+# or start the server and open the app in a new browser tab
2525+npm run dev -- --open
2626+```
2727+2828+## Building
2929+3030+To create a production version of your app:
3131+3232+```bash
3333+npm run build
3434+```
3535+3636+You can preview the production build with `npm run preview`.
3737+3838+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
···11+import adapter from '@sveltejs/adapter-static';
22+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
33+44+/** @type {import('@sveltejs/kit').Config} */
55+const config = {
66+ // Consult https://svelte.dev/docs/kit/integrations
77+ // for more information about preprocessors
88+ preprocess: vitePreprocess(),
99+1010+ kit: {
1111+ // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
1212+ // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
1313+ // See https://svelte.dev/docs/kit/adapters for more information about adapters.
1414+ adapter: adapter(),
1515+ paths: {
1616+ base: '/ui-kit'
1717+ }
1818+ }
1919+};
2020+2121+export default config;
···11+{
22+ "extends": "./.svelte-kit/tsconfig.json",
33+ "compilerOptions": {
44+ "allowJs": true,
55+ "checkJs": true,
66+ "esModuleInterop": true,
77+ "forceConsistentCasingInFileNames": true,
88+ "resolveJsonModule": true,
99+ "skipLibCheck": true,
1010+ "sourceMap": true,
1111+ "strict": true,
1212+ "moduleResolution": "bundler"
1313+ }
1414+ // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
1515+ // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
1616+ //
1717+ // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
1818+ // from the referenced tsconfig.json - TypeScript does not merge them in
1919+}
+6
vite.config.ts
···11+import { sveltekit } from '@sveltejs/kit/vite';
22+import { defineConfig } from 'vite';
33+44+export default defineConfig({
55+ plugins: [sveltekit()]
66+});
···11+<script>
22+ import { Subheading } from '$lib/components/heading';
33+ import { Input } from '$lib/components/input';
44+ import { Text } from '$lib/components/text';
55+</script>
66+77+<Subheading>Input</Subheading>
88+99+<Text class="mb-2 mt-4">Primary</Text>
1010+1111+<Input sizeVariant="sm" placeholder="Enter text here (small)" />
1212+<Input placeholder="Enter text here (default)" />
1313+<Input sizeVariant="lg" placeholder="Enter text here (large)" />
1414+1515+<Text class="mb-2 mt-4">Secondary</Text>
1616+1717+<Input variant="secondary" sizeVariant="sm" placeholder="Enter text here (small)" />
1818+<Input variant="secondary" placeholder="Enter text here (default)" />
1919+<Input variant="secondary" sizeVariant="lg" placeholder="Enter text here (large)" />
···11+<script>
22+ import { Subheading } from '$lib/components/heading';
33+ import { Text } from '$lib/components/text';
44+ import { Textarea } from '$lib/components/textarea';
55+</script>
66+77+<Subheading>Textarea</Subheading>
88+99+<Text class="mb-2 mt-4">Primary</Text>
1010+1111+<Textarea placeholder="Enter text here (default)" sizeVariant="sm" />
1212+<Textarea placeholder="Enter text here (default)" />
1313+<Textarea placeholder="Enter text here (default)" sizeVariant="lg" />
1414+1515+<Text class="mb-2 mt-4">Secondary</Text>
1616+1717+<Textarea placeholder="Enter text here (default)" variant="secondary" sizeVariant="sm" />
1818+<Textarea placeholder="Enter text here (default)" variant="secondary" />
1919+<Textarea placeholder="Enter text here (default)" variant="secondary" sizeVariant="lg" />
+17
src/lib/preview/TooltipPreview.svelte
···11+<script>
22+ import { Subheading } from '$lib/components/heading';
33+ import { Tooltip } from '$lib/components/tooltip';
44+ import { Text } from '$lib/components/text';
55+</script>
66+77+<Subheading>Tooltip</Subheading>
88+99+<Text class="mb-2 mt-4">Primary</Text>
1010+<div class="flex w-full flex-col items-start gap-2 py-12">
1111+ <Tooltip triggerText="Hover me" triggerVariant="primary" withContext>Hello there!</Tooltip>
1212+</div>
1313+1414+<Text class="mb-2 mt-4">Secondary</Text>
1515+<div class="flex w-full flex-col items-start gap-2 py-12">
1616+ <Tooltip triggerText="Hover me" triggerVariant="secondary" withContext>Hello there!</Tooltip>
1717+</div>
+22
src/lib/preview/VideoPlayerPreview.svelte
···11+<script lang="ts">
22+ import { Button } from '$lib/components/button';
33+ import Subheading from '$lib/components/heading/Subheading.svelte';
44+ import Text from '$lib/components/text/Text.svelte';
55+ import FullscreenVideoPlayer, {
66+ videoPlayer
77+ } from '$lib/components/video-player/FullscreenVideoPlayer.svelte';
88+ import VideoPlayer from '$lib/components/video-player/VideoPlayer.svelte';
99+</script>
1010+1111+<Subheading>Video Player</Subheading>
1212+1313+<Text class="mb-4 mt-4">Fullscreen Video Player</Text>
1414+<Button onclick={() => videoPlayer.show('https://www.youtube.com/watch?v=u1ZB_rGFyeU')}
1515+ >Show Video</Button
1616+>
1717+1818+<Text class="mb-4 mt-8">Inline Video Player</Text>
1919+2020+<VideoPlayer id="https://www.youtube.com/watch?v=u1ZB_rGFyeU" />
2121+2222+<FullscreenVideoPlayer />
+8
src/routes/alert/+page.svelte
···11+<script>
22+ import AlertPreview from '$lib/preview/AlertPreview.svelte';
33+ import Container from '$lib/preview/Container.svelte';
44+</script>
55+66+<Container>
77+ <AlertPreview />
88+</Container>
+8
src/routes/avatar/+page.svelte
···11+<script>
22+ import AvatarPreview from '$lib/preview/AvatarPreview.svelte';
33+ import Container from '$lib/preview/Container.svelte';
44+</script>
55+66+<Container>
77+ <AvatarPreview />
88+</Container>
+8
src/routes/badge/+page.svelte
···11+<script>
22+ import BadgesPreview from '$lib/preview/BadgesPreview.svelte';
33+ import Container from '$lib/preview/Container.svelte';
44+</script>
55+66+<Container>
77+ <BadgesPreview />
88+</Container>
+8
src/routes/button/+page.svelte
···11+<script>
22+ import ButtonsPreview from '$lib/preview/ButtonsPreview.svelte';
33+ import Container from '$lib/preview/Container.svelte';
44+</script>
55+66+<Container>
77+ <ButtonsPreview />
88+</Container>
+8
src/routes/checkbox/+page.svelte
···11+<script>
22+ import CheckboxPreview from '$lib/preview/CheckboxPreview.svelte';
33+ import Container from '$lib/preview/Container.svelte';
44+</script>
55+66+<Container>
77+ <CheckboxPreview />
88+</Container>
+8
src/routes/color-select/+page.svelte
···11+<script>
22+ import ColorSelectPreview from '$lib/preview/ColorSelectPreview.svelte';
33+ import Container from '$lib/preview/Container.svelte';
44+</script>
55+66+<Container>
77+ <ColorSelectPreview />
88+</Container>
+8
src/routes/depth-3d/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import Depth3DPreview from '$lib/preview/Depth3DPreview.svelte';
44+</script>
55+66+<Container>
77+ <Depth3DPreview />
88+</Container>
+8
src/routes/github-corner/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import GithubCornerPreview from '$lib/preview/GithubCornerPreview.svelte';
44+</script>
55+66+<Container>
77+ <GithubCornerPreview />
88+</Container>
+8
src/routes/heatmap/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import HeatmapPreview from '$lib/preview/HeatmapPreview.svelte';
44+</script>
55+66+<Container>
77+ <HeatmapPreview />
88+</Container>
+8
src/routes/input/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import InputPreview from '$lib/preview/InputPreview.svelte';
44+</script>
55+66+<Container>
77+ <InputPreview />
88+</Container>
+8
src/routes/phone/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import PhonePreview from '$lib/preview/PhonePreview.svelte';
44+</script>
55+66+<Container>
77+ <PhonePreview />
88+</Container>
+8
src/routes/piechart/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import PieChartPreview from '$lib/preview/PieChartPreview.svelte';
44+</script>
55+66+<Container>
77+ <PieChartPreview />
88+</Container>
+8
src/routes/progress/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import ProgressPreview from '$lib/preview/ProgressPreview.svelte';
44+</script>
55+66+<Container>
77+ <ProgressPreview />
88+</Container>
+8
src/routes/star-rating/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import StarRatingPreview from '$lib/preview/StarRatingPreview.svelte';
44+</script>
55+66+<Container>
77+ <StarRatingPreview />
88+</Container>
+8
src/routes/textarea/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import TextareaPreview from '$lib/preview/TextareaPreview.svelte';
44+</script>
55+66+<Container>
77+ <TextareaPreview />
88+</Container>
+8
src/routes/theme/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import SelectTheme from '$lib/preview/SelectTheme.svelte';
44+</script>
55+66+<Container>
77+ <SelectTheme />
88+</Container>
+8
src/routes/tooltip/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import TooltipPreview from '$lib/preview/TooltipPreview.svelte';
44+</script>
55+66+<Container>
77+ <TooltipPreview />
88+</Container>
+8
src/routes/video-player/+page.svelte
···11+<script>
22+ import Container from '$lib/preview/Container.svelte';
33+ import VideoPlayerPreview from '$lib/preview/VideoPlayerPreview.svelte';
44+</script>
55+66+<Container>
77+ <VideoPlayerPreview />
88+</Container>
static/images/depth3d/depth.webp
This is a binary file and will not be displayed.
static/images/depth3d/image.webp
This is a binary file and will not be displayed.
+15
src/lib/components/alert/alert-description.svelte
···11+<script lang="ts">
22+ import type { WithElementRef } from 'bits-ui';
33+ import type { HTMLAttributes } from 'svelte/elements';
44+55+ let {
66+ ref = $bindable(null),
77+ class: className,
88+ children,
99+ ...restProps
1010+ }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
1111+</script>
1212+1313+<div bind:this={ref} class={['text-xs', className]} {...restProps}>
1414+ {@render children?.()}
1515+</div>
···11+import Root from "./alert.svelte";
22+import Description from "./alert-description.svelte";
33+import Title from "./alert-title.svelte";
44+export { alertVariants, type AlertVariant } from "./alert.svelte";
55+66+export {
77+ Root,
88+ Description,
99+ Title,
1010+ //
1111+ Root as Alert,
1212+ Description as AlertDescription,
1313+ Title as AlertTitle,
1414+};
···11+import Root, {
22+ type ButtonProps,
33+ type ButtonSize,
44+ type ButtonVariant,
55+ buttonVariants
66+} from './Button.svelte';
77+88+export {
99+ Root,
1010+ type ButtonProps as Props,
1111+ Root as Button,
1212+ buttonVariants,
1313+ type ButtonProps,
1414+ type ButtonSize,
1515+ type ButtonVariant
1616+};
···11+import Root, {
22+ type InputProps,
33+ type InputSize,
44+ type InputVariant,
55+ inputVariants
66+} from './Input.svelte';
77+88+export {
99+ Root,
1010+ type InputProps as Props,
1111+ Root as Input,
1212+ inputVariants,
1313+ type InputProps,
1414+ type InputSize,
1515+ type InputVariant
1616+};