[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
add all package, finish moving base to core
+2337
-1887
+1
-1
README.md
+1
-1
README.md
+94
pnpm-lock.yaml
+94
pnpm-lock.yaml
···
239
239
specifier: ^6.2.6
240
240
version: 6.3.2
241
241
242
+
packages/all:
243
+
dependencies:
244
+
'@foxui/3d':
245
+
specifier: workspace:*
246
+
version: link:../3d
247
+
'@foxui/colors':
248
+
specifier: workspace:*
249
+
version: link:../colors
250
+
'@foxui/core':
251
+
specifier: workspace:*
252
+
version: link:../core
253
+
'@foxui/social':
254
+
specifier: workspace:*
255
+
version: link:../social
256
+
'@foxui/text':
257
+
specifier: workspace:*
258
+
version: link:../text
259
+
'@foxui/time':
260
+
specifier: workspace:*
261
+
version: link:../time
262
+
'@foxui/visual':
263
+
specifier: workspace:*
264
+
version: link:../visual
265
+
devDependencies:
266
+
'@eslint/compat':
267
+
specifier: ^1.2.5
268
+
version: 1.2.5(eslint@9.25.0)
269
+
'@eslint/js':
270
+
specifier: ^9.18.0
271
+
version: 9.25.0
272
+
'@sveltejs/adapter-auto':
273
+
specifier: ^6.0.0
274
+
version: 6.0.0(@sveltejs/kit@2.20.0)
275
+
'@sveltejs/adapter-static':
276
+
specifier: ^3.0.8
277
+
version: 3.0.8(@sveltejs/kit@2.20.0)
278
+
'@sveltejs/kit':
279
+
specifier: ^2.16.0
280
+
version: 2.20.0(@sveltejs/vite-plugin-svelte@5.0.3)(svelte@5.36.16)(vite@6.3.2)
281
+
'@sveltejs/package':
282
+
specifier: ^2.3.11
283
+
version: 2.3.11(svelte@5.36.16)(typescript@5.8.2)
284
+
'@sveltejs/vite-plugin-svelte':
285
+
specifier: ^5.0.0
286
+
version: 5.0.3(svelte@5.36.16)(vite@6.3.2)
287
+
'@tailwindcss/forms':
288
+
specifier: ^0.5.9
289
+
version: 0.5.9(tailwindcss@4.1.5)
290
+
'@tailwindcss/typography':
291
+
specifier: ^0.5.15
292
+
version: 0.5.15(tailwindcss@4.1.5)
293
+
'@tailwindcss/vite':
294
+
specifier: ^4.1.5
295
+
version: 4.1.5(vite@6.3.2)
296
+
eslint:
297
+
specifier: ^9.18.0
298
+
version: 9.25.0
299
+
eslint-config-prettier:
300
+
specifier: ^10.0.1
301
+
version: 10.1.1(eslint@9.25.0)
302
+
eslint-plugin-svelte:
303
+
specifier: ^3.0.0
304
+
version: 3.0.0(eslint@9.25.0)(svelte@5.36.16)
305
+
globals:
306
+
specifier: ^16.0.0
307
+
version: 16.0.0
308
+
prettier:
309
+
specifier: ^3.4.2
310
+
version: 3.5.2
311
+
prettier-plugin-svelte:
312
+
specifier: ^3.3.3
313
+
version: 3.3.3(prettier@3.5.2)(svelte@5.36.16)
314
+
prettier-plugin-tailwindcss:
315
+
specifier: ^0.6.11
316
+
version: 0.6.11(prettier-plugin-svelte@3.3.3)(prettier@3.5.2)
317
+
svelte:
318
+
specifier: ^5.0.0
319
+
version: 5.36.16
320
+
svelte-check:
321
+
specifier: ^4.0.0
322
+
version: 4.1.4(svelte@5.36.16)(typescript@5.8.2)
323
+
tailwindcss:
324
+
specifier: ^4.1.5
325
+
version: 4.1.5
326
+
typescript:
327
+
specifier: ^5.0.0
328
+
version: 5.8.2
329
+
typescript-eslint:
330
+
specifier: ^8.20.0
331
+
version: 8.30.1(eslint@9.25.0)(typescript@5.8.2)
332
+
vite:
333
+
specifier: ^6.2.6
334
+
version: 6.3.2
335
+
242
336
packages/colors:
243
337
dependencies:
244
338
'@foxui/core':
+23
packages/all/.gitignore
+23
packages/all/.gitignore
···
1
+
node_modules
2
+
3
+
# Output
4
+
.output
5
+
.vercel
6
+
.netlify
7
+
.wrangler
8
+
/.svelte-kit
9
+
/build
10
+
11
+
# OS
12
+
.DS_Store
13
+
Thumbs.db
14
+
15
+
# Env
16
+
.env
17
+
.env.*
18
+
!.env.example
19
+
!.env.test
20
+
21
+
# Vite
22
+
vite.config.js.timestamp-*
23
+
vite.config.ts.timestamp-*
+1
packages/all/.npmrc
+1
packages/all/.npmrc
···
1
+
engine-strict=true
+6
packages/all/.prettierignore
+6
packages/all/.prettierignore
+15
packages/all/.prettierrc
+15
packages/all/.prettierrc
···
1
+
{
2
+
"useTabs": true,
3
+
"singleQuote": true,
4
+
"trailingComma": "none",
5
+
"printWidth": 100,
6
+
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
7
+
"overrides": [
8
+
{
9
+
"files": "*.svelte",
10
+
"options": {
11
+
"parser": "svelte"
12
+
}
13
+
}
14
+
]
15
+
}
+1
packages/all/CHANGELOG.md
+1
packages/all/CHANGELOG.md
···
1
+
# @foxui/all
+21
packages/all/LICENSE
+21
packages/all/LICENSE
···
1
+
MIT License Copyright (c) 2025 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+21
packages/all/README.md
+21
packages/all/README.md
···
1
+
# 🦊 fox ui
2
+
3
+
svelte 5 + tailwind 4 ui kit, components from all sub packages
4
+
5
+
- [Core](https://www.npmjs.com/package/@foxui/core)
6
+
- [3D](https://www.npmjs.com/package/@foxui/3d)
7
+
- [Colors](https://www.npmjs.com/package/@foxui/colors)
8
+
- [Social](https://www.npmjs.com/package/@foxui/social)
9
+
- [Text](https://www.npmjs.com/package/@foxui/text)
10
+
- [Time](https://www.npmjs.com/package/@foxui/time)
11
+
- [Visual](https://www.npmjs.com/package/@foxui/visual)
12
+
13
+
> **This is a public alpha release. Expect bugs and breaking changes.**
14
+
15
+
[See all components here](https://flo-bit.dev/ui-kit)
16
+
17
+
For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
18
+
19
+
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
20
+
21
+
For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).
+36
packages/all/eslint.config.js
+36
packages/all/eslint.config.js
···
1
+
import prettier from 'eslint-config-prettier';
2
+
import js from '@eslint/js';
3
+
import { includeIgnoreFile } from '@eslint/compat';
4
+
import svelte from 'eslint-plugin-svelte';
5
+
import globals from 'globals';
6
+
import { fileURLToPath } from 'node:url';
7
+
import ts from 'typescript-eslint';
8
+
import svelteConfig from './svelte.config.js';
9
+
10
+
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
11
+
12
+
export default ts.config(
13
+
includeIgnoreFile(gitignorePath),
14
+
js.configs.recommended,
15
+
...ts.configs.recommended,
16
+
...svelte.configs.recommended,
17
+
prettier,
18
+
...svelte.configs.prettier,
19
+
{
20
+
languageOptions: {
21
+
globals: { ...globals.browser, ...globals.node }
22
+
},
23
+
rules: { 'no-undef': 'off' }
24
+
},
25
+
{
26
+
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
27
+
languageOptions: {
28
+
parserOptions: {
29
+
projectService: true,
30
+
extraFileExtensions: ['.svelte'],
31
+
parser: ts.parser,
32
+
svelteConfig
33
+
}
34
+
}
35
+
}
36
+
);
+92
packages/all/package.json
+92
packages/all/package.json
···
1
+
{
2
+
"name": "@foxui/all",
3
+
"private": false,
4
+
"version": "0.3.0",
5
+
"type": "module",
6
+
"scripts": {
7
+
"dev": "vite dev",
8
+
"build": "vite build && npm run prepack",
9
+
"build:package": "vite build && npm run prepack",
10
+
"preview": "vite preview",
11
+
"prepare": "svelte-kit sync || echo ''",
12
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13
+
"prepack": "svelte-kit sync && svelte-package && node ./scripts/cleanup.js",
14
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
15
+
"format": "prettier --write .",
16
+
"lint": "prettier --check . && eslint ."
17
+
},
18
+
"files": [
19
+
"dist"
20
+
],
21
+
"sideEffects": [
22
+
"**/*.css"
23
+
],
24
+
"exports": {
25
+
".": {
26
+
"types": "./src/lib/types.d.ts",
27
+
"svelte": "./src/lib/index.ts"
28
+
}
29
+
},
30
+
"types": "./src/lib/types.d.ts",
31
+
"svelte": "./src/lib/index.ts",
32
+
"publishOverrides": {
33
+
"files": [
34
+
"dist"
35
+
],
36
+
"svelte": "./dist/index.js",
37
+
"exports": {
38
+
".": {
39
+
"types": "./dist/types.d.ts",
40
+
"svelte": "./dist/index.js"
41
+
}
42
+
},
43
+
"types": "./dist/types.d.ts"
44
+
},
45
+
"devDependencies": {
46
+
"@eslint/compat": "^1.2.5",
47
+
"@eslint/js": "^9.18.0",
48
+
"@sveltejs/adapter-auto": "^6.0.0",
49
+
"@sveltejs/kit": "^2.16.0",
50
+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
51
+
"@tailwindcss/forms": "^0.5.9",
52
+
"@tailwindcss/typography": "^0.5.15",
53
+
"@tailwindcss/vite": "^4.1.5",
54
+
"eslint": "^9.18.0",
55
+
"eslint-config-prettier": "^10.0.1",
56
+
"eslint-plugin-svelte": "^3.0.0",
57
+
"globals": "^16.0.0",
58
+
"prettier": "^3.4.2",
59
+
"prettier-plugin-svelte": "^3.3.3",
60
+
"prettier-plugin-tailwindcss": "^0.6.11",
61
+
"svelte": "^5.0.0",
62
+
"svelte-check": "^4.0.0",
63
+
"tailwindcss": "^4.1.5",
64
+
"typescript": "^5.0.0",
65
+
"typescript-eslint": "^8.20.0",
66
+
"vite": "^6.2.6",
67
+
"@sveltejs/adapter-static": "^3.0.8",
68
+
"@sveltejs/package": "^2.3.11"
69
+
},
70
+
"dependencies": {
71
+
"@foxui/core": "workspace:*",
72
+
"@foxui/3d": "workspace:*",
73
+
"@foxui/colors": "workspace:*",
74
+
"@foxui/social": "workspace:*",
75
+
"@foxui/text": "workspace:*",
76
+
"@foxui/time": "workspace:*",
77
+
"@foxui/visual": "workspace:*"
78
+
},
79
+
"peerDependencies": {
80
+
"svelte": ">=5",
81
+
"tailwindcss": ">=3"
82
+
},
83
+
"description": "ui kit - svelte 5 + tailwind 4 - all components",
84
+
"homepage": "https://flo-bit.dev/ui-kit",
85
+
"repository": {
86
+
"type": "git",
87
+
"url": "git+https://github.com/flo-bit/ui-kit.git"
88
+
},
89
+
"author": "flo-bit (http://flo-bit.dev/)",
90
+
"bugs": "https://github.com/flo-bit/ui-kit/issues",
91
+
"license": "MIT"
92
+
}
+18
packages/all/svelte.config.js
+18
packages/all/svelte.config.js
···
1
+
import adapter from '@sveltejs/adapter-static';
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-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12
+
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13
+
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14
+
adapter: adapter()
15
+
}
16
+
};
17
+
18
+
export default config;
+19
packages/all/tsconfig.json
+19
packages/all/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
+
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15
+
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16
+
//
17
+
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18
+
// from the referenced tsconfig.json - TypeScript does not merge them in
19
+
}
+7
packages/all/vite.config.ts
+7
packages/all/vite.config.ts
+1
-1
apps/docs/src/app.html
+1
-1
apps/docs/src/app.html
···
45
45
</head>
46
46
<body
47
47
data-sveltekit-preload-data="hover"
48
-
class="bg-base-50 dark:bg-base-950 overflow-x-hidden motion-safe:transition-colors"
48
+
class="bg-base-100 dark:bg-base-950 overflow-x-hidden motion-safe:transition-colors"
49
49
>
50
50
<div style="display: contents">%sveltekit.body%</div>
51
51
</body>
+26
packages/all/scripts/cleanup.js
+26
packages/all/scripts/cleanup.js
···
1
+
import { readFileSync, writeFileSync } from 'fs';
2
+
3
+
/**
4
+
* This script utilizes a property called "publishOverrides" in the package.json
5
+
* to override specific properties in the package.json when publishing to npm.
6
+
*/
7
+
const cleanPackage = () => {
8
+
let packageJson = JSON.parse(
9
+
readFileSync('./package.json', {
10
+
encoding: 'utf-8'
11
+
})
12
+
);
13
+
14
+
packageJson = {
15
+
...packageJson,
16
+
...packageJson.publishOverrides
17
+
};
18
+
19
+
delete packageJson.publishOverrides;
20
+
21
+
writeFileSync('./package.json', JSON.stringify(packageJson, null, 2), {
22
+
encoding: 'utf-8'
23
+
});
24
+
};
25
+
26
+
cleanPackage();
+29
packages/all/src/app.css
+29
packages/all/src/app.css
···
1
+
@import 'tailwindcss';
2
+
@plugin '@tailwindcss/forms';
3
+
@plugin '@tailwindcss/typography';
4
+
5
+
@theme {
6
+
--color-base-50: var(--color-zinc-50);
7
+
--color-base-100: var(--color-zinc-100);
8
+
--color-base-200: var(--color-zinc-200);
9
+
--color-base-300: var(--color-zinc-300);
10
+
--color-base-400: var(--color-zinc-400);
11
+
--color-base-500: var(--color-zinc-500);
12
+
--color-base-600: var(--color-zinc-600);
13
+
--color-base-700: var(--color-zinc-700);
14
+
--color-base-800: var(--color-zinc-800);
15
+
--color-base-900: var(--color-zinc-900);
16
+
--color-base-950: var(--color-zinc-950);
17
+
18
+
--color-accent-50: var(--color-pink-50);
19
+
--color-accent-100: var(--color-pink-100);
20
+
--color-accent-200: var(--color-pink-200);
21
+
--color-accent-300: var(--color-pink-300);
22
+
--color-accent-400: var(--color-pink-400);
23
+
--color-accent-500: var(--color-pink-500);
24
+
--color-accent-600: var(--color-pink-600);
25
+
--color-accent-700: var(--color-pink-700);
26
+
--color-accent-800: var(--color-pink-800);
27
+
--color-accent-900: var(--color-pink-900);
28
+
--color-accent-950: var(--color-pink-950);
29
+
}
+13
packages/all/src/app.d.ts
+13
packages/all/src/app.d.ts
···
1
+
// See https://svelte.dev/docs/kit/types#app.d.ts
2
+
// for information about these interfaces
3
+
declare global {
4
+
namespace App {
5
+
// interface Error {}
6
+
// interface Locals {}
7
+
// interface PageData {}
8
+
// interface PageState {}
9
+
// interface Platform {}
10
+
}
11
+
}
12
+
13
+
export {};
+11
packages/all/src/app.html
+11
packages/all/src/app.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
+
%sveltekit.head%
7
+
</head>
8
+
<body data-sveltekit-preload-data="hover">
9
+
<div style="display: contents">%sveltekit.body%</div>
10
+
</body>
11
+
</html>
+7
-13
apps/docs/src/routes/+page.svelte
+7
-13
apps/docs/src/routes/+page.svelte
···
14
14
<Sidebar mobileOnly />
15
15
16
16
<div class="mx-auto flex w-full max-w-6xl flex-col items-start justify-center gap-8 px-8 py-24">
17
-
<div class="flex gap-2">
18
-
<Badge size="md" class="mt-16" variant="secondary">svelte 5</Badge>
19
-
<Badge size="md" class="mt-16" variant="secondary">tailwind 4</Badge>
20
-
<Badge size="md" class="mt-16" variant="secondary">ui kit</Badge>
17
+
<div class="flex gap-2 mt-16">
18
+
<Badge>svelte 5</Badge>
19
+
<Badge variant="primary_shift">tailwind 4</Badge>
20
+
<Badge variant="secondary">ui kit</Badge>
21
21
</div>
22
22
<div
23
23
class="text-base-950 dark:text-base-50 md:leading-14 mb-4 max-w-2xl text-pretty text-4xl font-bold tracking-tight md:text-5xl"
···
33
33
</div>
34
34
</div>
35
35
36
-
{#if dev}
37
-
<Badge class="fixed bottom-1 left-1">
38
-
{count} components
39
-
</Badge>
40
-
{/if}
41
36
42
-
<div class="mb-16 flex gap-2">
37
+
<div class="mb-0 flex gap-2">
43
38
<Button href={base + '/docs/quick-start'} class="mb-8">Quick Start</Button>
44
39
<Button variant="link" href={base + '/docs/philosophy'} class="mb-8"
45
40
>Learn more <span>→</span></Button
46
41
>
47
42
</div>
48
43
49
-
<div class="flex flex-col gap-4">
50
-
<Subheading>Categories</Subheading>
44
+
<!-- <div class="flex flex-col gap-4">
51
45
<div class="flex flex-wrap gap-2">
52
46
{#each components as component}
53
47
<Button variant="secondary" href={'#' + component.name}>{component.name}</Button>
54
48
{/each}
55
49
</div>
56
-
</div>
50
+
</div> -->
57
51
58
52
<Cards />
59
53
</div>
+7
packages/all/src/lib/index.ts
+7
packages/all/src/lib/index.ts
+7
packages/all/src/lib/types.d.ts
+7
packages/all/src/lib/types.d.ts
+7
packages/all/src/routes/+layout.svelte
+7
packages/all/src/routes/+layout.svelte
+1
packages/all/src/routes/+layout.ts
+1
packages/all/src/routes/+layout.ts
···
1
+
export const prerender = true;
packages/all/src/routes/+page.svelte
packages/all/src/routes/+page.svelte
+2
-2
apps/docs/src/lib/site-components/components_all.ts
+2
-2
apps/docs/src/lib/site-components/components_all.ts
+7
-6
apps/docs/src/routes/(main)/docs/quick-start/QuickStart.md
+7
-6
apps/docs/src/routes/(main)/docs/quick-start/QuickStart.md
···
14
14
15
15
Also add the `@tailwindcss/typography` and `@tailwindcss/forms` plugins.
16
16
17
-
## 2. Install fuchs
17
+
## 2. Install all fox ui components by running:
18
18
19
19
```bash
20
-
npm install @foxui/core
20
+
npm install @foxui/all
21
21
```
22
22
23
23
## 3. Set theme variables in your `app.css`
···
25
25
You can change the colors to your liking.
26
26
27
27
```css
28
-
@source "../node_modules/@fuxui";
28
+
@source "../node_modules/@foxui";
29
29
30
30
@theme {
31
31
--color-base-50: var(--color-zinc-50);
···
58
58
59
59
```svelte
60
60
<script>
61
-
import { Button } from '@foxui/core';
61
+
import { Button } from '@foxui/all';
62
62
</script>
63
63
64
64
<Button>Click me</Button>
···
68
68
69
69
### Subpackages
70
70
71
-
Fox ui is split into multiple subpackages. Simply install a subpackage when you need it, or you can install all of them with:
71
+
Fox UI is split into multiple subpackages to minimize both the bundle size as well as the amount of dependencies.
72
+
Simply install a package when you need it, or you can install all of them with:
72
73
73
74
```bash
74
-
npm install @foxui/core @foxui/3d @foxui/colors @foxui/social @foxui/text @foxui/time @foxui/visual
75
+
npm install @foxui/all
75
76
```
76
77
77
78
### Dark mode
-8
apps/docs/src/routes/(main)/components/base/accordion/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/accordion/+page.svelte
-35
apps/docs/src/routes/(main)/components/base/accordion/Accordion.md
-35
apps/docs/src/routes/(main)/components/base/accordion/Accordion.md
···
1
-
<script lang="ts">
2
-
import AccordionExample from './Example.svelte';
3
-
import AccordionProps from './Props.svelte';
4
-
</script>
5
-
6
-
# Accordion
7
-
8
-
## Example
9
-
10
-
<AccordionExample />
11
-
12
-
## Usage
13
-
14
-
```svelte
15
-
<script lang="ts">
16
-
import { Accordion, AccordionItem } from '@foxui/core';
17
-
</script>
18
-
19
-
<Accordion type="single">
20
-
<AccordionItem title="Is it accessible?">
21
-
Yes. It adheres to the WAI-ARIA design pattern.
22
-
</AccordionItem>
23
-
<AccordionItem title="Are you sure?">
24
-
I mean, I hope so? It's based on the bits-ui accordion component, so if not it's not my fault 😅
25
-
</AccordionItem>
26
-
</Accordion>
27
-
```
28
-
29
-
## API Reference
30
-
31
-
<AccordionProps />
32
-
33
-
## Credits
34
-
35
-
This component is based on the [bits-ui accordion component](https://bits-ui.com/docs/components/accordion).
-15
apps/docs/src/routes/(main)/components/base/accordion/Example.svelte
-15
apps/docs/src/routes/(main)/components/base/accordion/Example.svelte
···
1
-
<script lang="ts">
2
-
import { Accordion, AccordionItem } from '@foxui/core';
3
-
</script>
4
-
5
-
<Accordion type="single">
6
-
<AccordionItem title="Is it accessible?">
7
-
Yes. It adheres to the WAI-ARIA design pattern.
8
-
</AccordionItem>
9
-
<AccordionItem title="Are you sure?">
10
-
I mean, I hope so? It's based on the <a
11
-
href="https://bits-ui.com/docs/components/accordion"
12
-
target="_blank">bits-ui accordion component</a
13
-
>, so if not it's not my fault 😅
14
-
</AccordionItem>
15
-
</Accordion>
-83
apps/docs/src/routes/(main)/components/base/accordion/Props.svelte
-83
apps/docs/src/routes/(main)/components/base/accordion/Props.svelte
···
1
-
<script>
2
-
import Api from '$lib/site-components/API.svelte';
3
-
</script>
4
-
5
-
<Api
6
-
props={{
7
-
title: 'Accordion',
8
-
props: {
9
-
children: {
10
-
type: 'Snippet',
11
-
description:
12
-
'The children content to render. Should be a list of AccordionItem components.',
13
-
required: true
14
-
},
15
-
type: {
16
-
type: { type: 'enum', definition: "'single' | 'multiple'" },
17
-
description:
18
-
"If set to 'multiple', the accordion will allow multiple items to be open at the same time. If set to single, the accordion will only allow a single item to be open.",
19
-
required: true
20
-
},
21
-
value: {
22
-
type: { type: 'union', definition: 'string | string[]' },
23
-
description:
24
-
'The value of the accordion item that is currently open. If type is set to "multiple", this will be an array of strings. If type is set to "single", this will be a string.',
25
-
bindable: true
26
-
},
27
-
onValueChange: {
28
-
type: {
29
-
type: 'function',
30
-
definition: '(value: string) => void | (value: string[]) => void'
31
-
},
32
-
description: 'A function that is called when the value of the accordion item changes.'
33
-
},
34
-
disabled: {
35
-
type: 'boolean',
36
-
description: 'Whether the accordion is disabled.',
37
-
default: 'false'
38
-
},
39
-
ref: {
40
-
type: 'HTMLDivElement',
41
-
description:
42
-
'The underlying DOM element being rendered. You can bind to this to get a reference to the element.',
43
-
bindable: true
44
-
}
45
-
}
46
-
}}
47
-
/>
48
-
49
-
<Api
50
-
props={{
51
-
title: 'AccordionItem',
52
-
props: {
53
-
title: {
54
-
type: 'string',
55
-
description:
56
-
'The title of the accordion item, displayed both when the item is closed or open.',
57
-
required: true
58
-
},
59
-
children: {
60
-
type: 'Snippet',
61
-
description:
62
-
'The children content to render. The content is displayed when the item is open.',
63
-
required: true
64
-
},
65
-
value: {
66
-
type: 'string',
67
-
description:
68
-
'The value of the accordion item. This is used to identify when the item is open or closed. If not provided, a unique ID will be generated for this value.'
69
-
},
70
-
disabled: {
71
-
type: 'boolean',
72
-
description: 'Whether the accordion item is disabled.',
73
-
default: 'false'
74
-
},
75
-
ref: {
76
-
type: 'HTMLDivElement',
77
-
description:
78
-
'The underlying DOM element being rendered. You can bind to this to get a reference to the element.',
79
-
bindable: true
80
-
}
81
-
}
82
-
}}
83
-
/>
-8
apps/docs/src/routes/(main)/components/base/alert/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/alert/+page.svelte
-21
apps/docs/src/routes/(main)/components/base/alert/Alert.md
-21
apps/docs/src/routes/(main)/components/base/alert/Alert.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Alert
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Alert } from '@foxui/core';
16
-
</script>
17
-
18
-
<Alert title="Alert Title" type="info">
19
-
<span>Alert Description</span>
20
-
</Alert>
21
-
```
-55
apps/docs/src/routes/(main)/components/base/alert/Example.svelte
-55
apps/docs/src/routes/(main)/components/base/alert/Example.svelte
···
1
-
<script>
2
-
import { Alert, AlertDescription, AlertTitle } from '@foxui/core';
3
-
</script>
4
-
5
-
<Alert class="mb-2">
6
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
7
-
<path
8
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
9
-
/>
10
-
<path
11
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
12
-
/>
13
-
<path
14
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
15
-
/>
16
-
</svg>
17
-
<AlertTitle class="text-rose-500 dark:text-rose-500">Default Alert</AlertTitle>
18
-
<AlertDescription>Alert Description</AlertDescription>
19
-
</Alert>
20
-
21
-
<Alert variant="secondary" class="mb-4">
22
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
-
<path
24
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
25
-
/>
26
-
<path
27
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
28
-
/>
29
-
<path
30
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
31
-
/>
32
-
</svg>
33
-
<AlertTitle>Secondary Alert</AlertTitle>
34
-
<AlertDescription>Alert Description</AlertDescription>
35
-
</Alert>
36
-
37
-
<h3>Preset Alerts</h3>
38
-
39
-
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
40
-
<Alert title="Warning alert" type="warning">
41
-
<span>Alert Description</span>
42
-
</Alert>
43
-
44
-
<Alert title="Error alert" type="error">
45
-
<span>Alert Description</span>
46
-
</Alert>
47
-
48
-
<Alert title="Success alert" type="success">
49
-
<span>Alert Description</span>
50
-
</Alert>
51
-
52
-
<Alert title="Info alert" type="info">
53
-
<span>Alert Description</span>
54
-
</Alert>
55
-
</div>
-8
apps/docs/src/routes/(main)/components/base/avatar/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/avatar/+page.svelte
-34
apps/docs/src/routes/(main)/components/base/avatar/Avatar.md
-34
apps/docs/src/routes/(main)/components/base/avatar/Avatar.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Avatar
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Avatar, AvatarGroup } from '@foxui/core';
16
-
</script>
17
-
18
-
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />
19
-
20
-
<AvatarGroup
21
-
users={[
22
-
{
23
-
src: 'https://github.com/flo-bit.png',
24
-
alt: 'flo-bit',
25
-
fallback: 'FB'
26
-
},
27
-
{
28
-
src: 'https://github.com/rich-harris.png',
29
-
alt: 'rich-harris',
30
-
fallback: 'RH'
31
-
}
32
-
]}
33
-
/>
34
-
```
-35
apps/docs/src/routes/(main)/components/base/avatar/Example.svelte
-35
apps/docs/src/routes/(main)/components/base/avatar/Example.svelte
···
1
-
<script>
2
-
import { Avatar, AvatarGroup } from '@foxui/core';
3
-
</script>
4
-
5
-
<h3>Single Avatar</h3>
6
-
7
-
<div class="not-prose flex items-center gap-2">
8
-
<Avatar fallback="AB" />
9
-
<Avatar />
10
-
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />
11
-
</div>
12
-
13
-
<h3>Avatars Group</h3>
14
-
15
-
<AvatarGroup
16
-
users={[
17
-
{
18
-
src: 'https://github.com/flo-bit.png',
19
-
alt: 'flo-bit',
20
-
fallback: 'FB'
21
-
},
22
-
{
23
-
src: 'https://github.com/rich-harris.png',
24
-
alt: 'rich-harris'
25
-
},
26
-
{
27
-
src: 'https://github.com/huntabyte.png',
28
-
alt: 'huntabyte'
29
-
},
30
-
{
31
-
fallback: '+5'
32
-
}
33
-
]}
34
-
class="not-prose"
35
-
/>
-8
apps/docs/src/routes/(main)/components/base/badge/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/badge/+page.svelte
-19
apps/docs/src/routes/(main)/components/base/badge/Badge.md
-19
apps/docs/src/routes/(main)/components/base/badge/Badge.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Badge
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Badge } from '@foxui/core';
16
-
</script>
17
-
18
-
<Badge size="sm" variant="primary">Badge</Badge>
19
-
```
-77
apps/docs/src/routes/(main)/components/base/badge/Example.svelte
-77
apps/docs/src/routes/(main)/components/base/badge/Example.svelte
···
1
-
<script>
2
-
import { Badge } from '@foxui/core';
3
-
</script>
4
-
5
-
<h3>Primary</h3>
6
-
7
-
<div class="flex items-center gap-2">
8
-
<Badge size="sm"
9
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
10
-
<path
11
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
12
-
/>
13
-
<path
14
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
15
-
/>
16
-
<path
17
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
18
-
/>
19
-
</svg>default</Badge
20
-
>
21
-
<Badge size="md"
22
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
-
<path
24
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
25
-
/>
26
-
<path
27
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
28
-
/>
29
-
<path
30
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
31
-
/>
32
-
</svg>md</Badge
33
-
>
34
-
<Badge size="lg"
35
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
36
-
<path
37
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
38
-
/>
39
-
<path
40
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
41
-
/>
42
-
<path
43
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
44
-
/>
45
-
</svg>lg</Badge
46
-
>
47
-
</div>
48
-
49
-
<h3>Secondary</h3>
50
-
51
-
<div class="flex items-center gap-2">
52
-
<Badge size="sm" variant="secondary">Badge</Badge>
53
-
<Badge size="md" variant="secondary">Badge</Badge>
54
-
<Badge size="lg" variant="secondary">Badge</Badge>
55
-
</div>
56
-
57
-
<h3>Colors</h3>
58
-
59
-
<div class="flex flex-wrap items-center gap-2">
60
-
<Badge variant="red">Red</Badge>
61
-
<Badge variant="yellow">Yellow</Badge>
62
-
<Badge variant="green">Green</Badge>
63
-
<Badge variant="blue">Blue</Badge>
64
-
<Badge variant="indigo">Indigo</Badge>
65
-
<Badge variant="violet">Violet</Badge>
66
-
<Badge variant="purple">Purple</Badge>
67
-
<Badge variant="fuchsia">Fuchsia</Badge>
68
-
<Badge variant="pink">Pink</Badge>
69
-
<Badge variant="rose">Rose</Badge>
70
-
<Badge variant="orange">Orange</Badge>
71
-
<Badge variant="amber">Amber</Badge>
72
-
<Badge variant="lime">Lime</Badge>
73
-
<Badge variant="emerald">Emerald</Badge>
74
-
<Badge variant="teal">Teal</Badge>
75
-
<Badge variant="cyan">Cyan</Badge>
76
-
<Badge variant="sky">Sky</Badge>
77
-
</div>
-8
apps/docs/src/routes/(main)/components/base/box/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/box/+page.svelte
-19
apps/docs/src/routes/(main)/components/base/box/Box.md
-19
apps/docs/src/routes/(main)/components/base/box/Box.md
···
1
-
<script>
2
-
import { Box } from '@foxui/core';
3
-
</script>
4
-
5
-
# Box
6
-
7
-
## Examples
8
-
9
-
<Box class="text-sm">This is a box, put your stuff here.</Box>
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Box } from '@foxui/core';
16
-
</script>
17
-
18
-
<Box class="text-sm">This is a box, put your stuff here.</Box>
19
-
```
-8
apps/docs/src/routes/(main)/components/base/cards/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/cards/+page.svelte
-19
apps/docs/src/routes/(main)/components/base/cards/Cards.md
-19
apps/docs/src/routes/(main)/components/base/cards/Cards.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Image card
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { ImageCard } from '@foxui/core';
16
-
</script>
17
-
18
-
<ImageCard src={'/image.jpg'} alt="" title="Card title" description="Card description" href="#" />
19
-
```
-43
apps/docs/src/routes/(main)/components/base/cards/Example.svelte
-43
apps/docs/src/routes/(main)/components/base/cards/Example.svelte
···
1
-
<script>
2
-
import { ImageCard, toast} from '@foxui/core';
3
-
4
-
import nature1 from '$lib/assets/images/nature1.webp';
5
-
import nature2 from '$lib/assets/images/nature2.webp';
6
-
import nature3 from '$lib/assets/images/nature3.webp';
7
-
</script>
8
-
9
-
<h3>Full width</h3>
10
-
11
-
<ImageCard
12
-
src={nature1}
13
-
alt="Nature 1"
14
-
title="Hello World"
15
-
description="Just wanted to say hello to everyone on this beautiful planet, been traveling a lot lately and wanted to share some of the places I've been to."
16
-
href="#"
17
-
class="not-prose mb-16"
18
-
/>
19
-
20
-
<h3>In a grid</h3>
21
-
22
-
<div class="not-prose grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
23
-
<ImageCard
24
-
src={nature1}
25
-
alt="Nature 1"
26
-
title="Best places to visit"
27
-
description="This is such a long description, that it will probably be cut off and truncated after the first two lines."
28
-
href="#"
29
-
/>
30
-
<ImageCard
31
-
src={nature2}
32
-
alt="Nature 2"
33
-
title="This is a beautiful place"
34
-
description="This card will show a toast when clicked"
35
-
onclick={() => toast('Hello World')}
36
-
/>
37
-
<ImageCard
38
-
src={nature3}
39
-
alt="Nature 3"
40
-
title="Traveling is fun"
41
-
description="But this card is not clickable"
42
-
/>
43
-
</div>
-8
apps/docs/src/routes/(main)/components/base/chat-bubble/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/chat-bubble/+page.svelte
-25
apps/docs/src/routes/(main)/components/base/chat-bubble/ChatBubble.md
-25
apps/docs/src/routes/(main)/components/base/chat-bubble/ChatBubble.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Chat Bubble
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { ChatBubble } from '@foxui/core';
16
-
</script>
17
-
18
-
<ChatBubble side="right">
19
-
<p>Hello there</p>
20
-
</ChatBubble>
21
-
22
-
<ChatBubble>
23
-
<p>General Kenobi</p>
24
-
</ChatBubble>
25
-
```
-30
apps/docs/src/routes/(main)/components/base/chat-bubble/Example.svelte
-30
apps/docs/src/routes/(main)/components/base/chat-bubble/Example.svelte
···
1
-
<script>
2
-
import { Box, ChatBubble, ImageContainer } from '@foxui/core';
3
-
4
-
import cute from '$lib/assets/images/cute.webp';
5
-
</script>
6
-
7
-
<Box class="not-prose flex flex-col gap-3">
8
-
<ChatBubble side="right">
9
-
<p>Hello there</p>
10
-
</ChatBubble>
11
-
12
-
<ChatBubble>
13
-
<p>General Kenobi</p>
14
-
</ChatBubble>
15
-
16
-
<ChatBubble side="right">
17
-
<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
18
-
</ChatBubble>
19
-
<ChatBubble>
20
-
<p>
21
-
This is another really long message that should wrap around the chat bubble and not overflow
22
-
</p>
23
-
</ChatBubble>
24
-
25
-
<ChatBubble side="right">
26
-
<p>This is me sending you an image</p>
27
-
28
-
<ImageContainer src={cute} alt="cute cat" containerClasses="-mx-1.5 rounded-xl" />
29
-
</ChatBubble>
30
-
</Box>
-8
apps/docs/src/routes/(main)/components/base/checkbox/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/checkbox/+page.svelte
-21
apps/docs/src/routes/(main)/components/base/checkbox/Checkbox.md
-21
apps/docs/src/routes/(main)/components/base/checkbox/Checkbox.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Checkbox
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Checkbox } from '@foxui/core';
16
-
17
-
let checked = $state(false);
18
-
</script>
19
-
20
-
<Checkbox sizeVariant="sm" variant="primary" bind:checked />
21
-
```
-32
apps/docs/src/routes/(main)/components/base/checkbox/Example.svelte
-32
apps/docs/src/routes/(main)/components/base/checkbox/Example.svelte
···
1
-
<script>
2
-
import { Checkbox, Label } from '@foxui/core';
3
-
</script>
4
-
5
-
<h3>Primary</h3>
6
-
7
-
<div class="flex items-center gap-2">
8
-
<Checkbox sizeVariant="sm" variant="primary" />
9
-
<Checkbox sizeVariant="default" variant="primary" />
10
-
<Checkbox sizeVariant="lg" variant="primary" />
11
-
</div>
12
-
13
-
<h3>Secondary</h3>
14
-
15
-
<div class="flex items-center gap-2">
16
-
<Checkbox sizeVariant="sm" variant="secondary" />
17
-
<Checkbox sizeVariant="default" variant="secondary" />
18
-
<Checkbox sizeVariant="lg" variant="secondary" />
19
-
</div>
20
-
21
-
<h3>With Label</h3>
22
-
23
-
<div class="not-prose flex items-center space-x-2">
24
-
<Checkbox id="terms" aria-labelledby="terms-label" variant="secondary" />
25
-
<Label
26
-
id="terms-label"
27
-
for="terms"
28
-
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
29
-
>
30
-
Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
31
-
</Label>
32
-
</div>
-8
apps/docs/src/routes/(main)/components/base/head/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/head/+page.svelte
-21
apps/docs/src/routes/(main)/components/base/head/Head.md
-21
apps/docs/src/routes/(main)/components/base/head/Head.md
···
1
-
# Head
2
-
3
-
Sets title, description, open graph image, url and emoji favicon.
4
-
5
-
It's recommended to add this to your root layout.
6
-
7
-
## Usage
8
-
9
-
```svelte
10
-
<script>
11
-
import { Head } from '@foxui/core';
12
-
</script>
13
-
14
-
<Head
15
-
title="Website Title"
16
-
description="Website Description"
17
-
image="open-graph-image.png"
18
-
url="https://website-url.com"
19
-
emojiFavicon="🦊"
20
-
/>
21
-
```
-8
apps/docs/src/routes/(main)/components/base/image/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/image/+page.svelte
-27
apps/docs/src/routes/(main)/components/base/image/Example.svelte
-27
apps/docs/src/routes/(main)/components/base/image/Example.svelte
···
1
-
<script>
2
-
import { ImageContainer } from '@foxui/core';
3
-
4
-
import cute from '$lib/assets/images/cute.webp';
5
-
import cute2 from '$lib/assets/images/cute2.webp';
6
-
</script>
7
-
8
-
<ImageContainer src={cute} alt="Such a cute animal" containerClasses="not-prose max-w-64" />
9
-
10
-
<h3>Overlay theme color</h3>
11
-
12
-
<ImageContainer
13
-
src={cute2}
14
-
alt="Another cute animal"
15
-
useThemeColor={true}
16
-
containerClasses="max-w-44 not-prose"
17
-
/>
18
-
19
-
<h3>Show normal image on hover</h3>
20
-
21
-
<ImageContainer
22
-
src={cute2}
23
-
alt="Another cute animal"
24
-
useThemeColor={true}
25
-
containerClasses="max-w-44 not-prose"
26
-
showNormalOnHover={true}
27
-
/>
-21
apps/docs/src/routes/(main)/components/base/image/Image.md
-21
apps/docs/src/routes/(main)/components/base/image/Image.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Image
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { ImageContainer } from '@foxui/core';
16
-
</script>
17
-
18
-
<ImageContainer src="/image.jpg" alt="Alt tag" />
19
-
20
-
<ImageContainer src="/image.jpg" alt="Alt tag" useThemeColor showNormalOnHover />
21
-
```
-8
apps/docs/src/routes/(main)/components/base/input/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/input/+page.svelte
-19
apps/docs/src/routes/(main)/components/base/input/Example.svelte
-19
apps/docs/src/routes/(main)/components/base/input/Example.svelte
···
1
-
<script>
2
-
import { Input } from '@foxui/core';
3
-
</script>
4
-
5
-
<h3>Primary</h3>
6
-
7
-
<div class="flex w-fit flex-col gap-4">
8
-
<Input sizeVariant="sm" placeholder="Enter text here (small)" />
9
-
<Input placeholder="Enter text here (default)" />
10
-
<Input sizeVariant="lg" placeholder="Enter text here (large)" />
11
-
</div>
12
-
13
-
<h3>Secondary</h3>
14
-
15
-
<div class="flex w-fit flex-col gap-4">
16
-
<Input variant="secondary" sizeVariant="sm" placeholder="Enter text here (small)" />
17
-
<Input variant="secondary" placeholder="Enter text here (default)" />
18
-
<Input variant="secondary" sizeVariant="lg" placeholder="Enter text here (large)" />
19
-
</div>
-21
apps/docs/src/routes/(main)/components/base/input/Input.md
-21
apps/docs/src/routes/(main)/components/base/input/Input.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Input
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Input } from '@foxui/core';
16
-
17
-
let value = $state('');
18
-
</script>
19
-
20
-
<Input sizeVariant="sm" placeholder="Enter text here" bind:value />
21
-
```
-8
apps/docs/src/routes/(main)/components/base/modal/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/modal/+page.svelte
-35
apps/docs/src/routes/(main)/components/base/modal/Example.svelte
-35
apps/docs/src/routes/(main)/components/base/modal/Example.svelte
···
1
-
<script lang="ts">
2
-
import { Button, Modal, toast, ImageContainer, Subheading } from '@foxui/core';
3
-
4
-
import cute from '$lib/assets/images/cute.webp';
5
-
6
-
let openDefault = $state(false);
7
-
let openCustom = $state(false);
8
-
</script>
9
-
10
-
<Button onclick={() => (openDefault = true)}>Default Modal</Button>
11
-
12
-
<Button onclick={() => (openCustom = true)} variant="secondary">Custom Modal</Button>
13
-
14
-
<Modal
15
-
bind:open={openDefault}
16
-
title="This is the default modal"
17
-
description="It has a title, description, and two buttons (yes and no)"
18
-
yesButton={{ onclick: () => toast('Yes', { description: 'Smart choice' }) }}
19
-
noButton={{ onclick: () => toast('No', { description: 'Why not though?' }) }}
20
-
/>
21
-
22
-
<Modal bind:open={openCustom} closeButton={false}>
23
-
<Subheading>
24
-
You can put anything in here... Like an image:
25
-
</Subheading>
26
-
27
-
<ImageContainer
28
-
src={cute}
29
-
alt="image in modal"
30
-
useThemeColor
31
-
containerClasses="max-w-64 mx-auto"
32
-
/>
33
-
34
-
<Button onclick={() => (openCustom = false)}>Cool</Button>
35
-
</Modal>
-28
apps/docs/src/routes/(main)/components/base/modal/Modal.md
-28
apps/docs/src/routes/(main)/components/base/modal/Modal.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Modal
6
-
7
-
## Examples
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Modal, Button } from '@foxui/core';
16
-
17
-
let open = $state(false);
18
-
</script>
19
-
20
-
<Modal
21
-
bind:open
22
-
title="This is the default modal"
23
-
yesButton={{ onclick: () => console.log('yes') }}
24
-
noButton={{ onclick: () => console.log('no') }}
25
-
/>
26
-
27
-
<Button onclick={() => (open = true)}>Open modal</Button>
28
-
```
-8
apps/docs/src/routes/(main)/components/base/number-input/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/number-input/+page.svelte
-25
apps/docs/src/routes/(main)/components/base/number-input/NumberInput.md
-25
apps/docs/src/routes/(main)/components/base/number-input/NumberInput.md
···
1
-
<script>
2
-
import { NumberInput } from '@foxui/core';
3
-
</script>
4
-
5
-
# Number Input
6
-
7
-
## Example
8
-
9
-
<NumberInput />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { NumberInput } from '@foxui/core';
16
-
17
-
let value = $state(0);
18
-
</script>
19
-
20
-
<NumberInput min={0} max={100} bind:value />
21
-
```
22
-
23
-
## Credits
24
-
25
-
- Adapted from an example of [number-flow](https://number-flow.barvian.me/)
-8
apps/docs/src/routes/(main)/components/base/popover/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/popover/+page.svelte
-59
apps/docs/src/routes/(main)/components/base/popover/Example.svelte
-59
apps/docs/src/routes/(main)/components/base/popover/Example.svelte
···
1
-
<script lang="ts">
2
-
import { Popover, Button, toast } from '@foxui/core';
3
-
4
-
let open = $state(false);
5
-
6
-
let colors = [
7
-
{ label: '1', value: 'oklch(from var(--color-accent-500) l c h)' },
8
-
{ label: '2', value: 'oklch(from var(--color-accent-500) l c calc(h + 40))' },
9
-
{ label: '3', value: 'oklch(from var(--color-accent-500) l c calc(h + 80))' }
10
-
];
11
-
</script>
12
-
13
-
<h3>Default trigger</h3>
14
-
15
-
<Popover triggerText="click me" triggerVariant="secondary" triggerClasses="mt-2" bind:open>
16
-
<div class="flex items-center justify-between gap-2">
17
-
<div>Are you sure?</div>
18
-
<div>
19
-
<Button
20
-
variant="secondary"
21
-
size="iconSm"
22
-
onclick={() => {
23
-
open = !open;
24
-
toast('Fair enough!');
25
-
}}
26
-
>
27
-
<svg
28
-
xmlns="http://www.w3.org/2000/svg"
29
-
fill="none"
30
-
viewBox="0 0 24 24"
31
-
stroke-width="1.5"
32
-
stroke="currentColor"
33
-
class="size-6"
34
-
>
35
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
36
-
</svg>
37
-
</Button>
38
-
39
-
<Button
40
-
size="iconSm"
41
-
onclick={() => {
42
-
open = !open;
43
-
toast('Good choice!');
44
-
}}
45
-
>
46
-
<svg
47
-
xmlns="http://www.w3.org/2000/svg"
48
-
fill="none"
49
-
viewBox="0 0 24 24"
50
-
stroke-width="1.5"
51
-
stroke="currentColor"
52
-
class="size-6"
53
-
>
54
-
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
55
-
</svg>
56
-
</Button>
57
-
</div>
58
-
</div>
59
-
</Popover>
-28
apps/docs/src/routes/(main)/components/base/popover/Popover.md
-28
apps/docs/src/routes/(main)/components/base/popover/Popover.md
···
1
-
<script lang="ts">
2
-
import PopoverExample from './Example.svelte';
3
-
</script>
4
-
5
-
# Popover
6
-
7
-
## Example
8
-
9
-
<PopoverExample />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script lang="ts">
15
-
import { Popover } from '@foxui/core';
16
-
</script>
17
-
18
-
<!-- default trigger -->
19
-
<Popover triggerText="Click me" triggerVariant="secondary">Hello this is a test</Popover>
20
-
21
-
<!-- custom trigger -->
22
-
<Popover>
23
-
{#snippet child({ props })}
24
-
<button {...props} class="bg-accent-500 mt-2 size-8 cursor-pointer rounded-full"></button>
25
-
{/snippet}
26
-
Content of the popover here
27
-
</Popover>
28
-
```
-8
apps/docs/src/routes/(main)/components/base/prose/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/prose/+page.svelte
-29
apps/docs/src/routes/(main)/components/base/prose/Prose.md
-29
apps/docs/src/routes/(main)/components/base/prose/Prose.md
···
1
-
<script>
2
-
import { Box } from '@foxui/core';
3
-
</script>
4
-
5
-
# Prose
6
-
7
-
## Example
8
-
9
-
<Box>
10
-
<h1>Prose</h1>
11
-
<p>Prose is a component that renders html tags with automatic styles applied.</p>
12
-
<p>It is useful for rendering markdown content.</p>
13
-
14
-
<p>This is a link: <a href="https://google.com">Google</a></p>
15
-
</Box>
16
-
17
-
## Usage
18
-
19
-
```svelte
20
-
<script>
21
-
import Prose from '@foxui/core';
22
-
</script>
23
-
24
-
<Prose>
25
-
<h1>Prose</h1>
26
-
27
-
<p>Prose is a component</p>
28
-
</Prose>
29
-
```
-8
apps/docs/src/routes/(main)/components/base/scroll-area/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/scroll-area/+page.svelte
-39
apps/docs/src/routes/(main)/components/base/scroll-area/Example.svelte
-39
apps/docs/src/routes/(main)/components/base/scroll-area/Example.svelte
···
1
-
<script>
2
-
import { ScrollArea } from '@foxui/core';
3
-
4
-
let content = `Doggo ipsum puggorino shoob I am bekom fat. Clouds such treat big ol pupper vvv, porgo. Aqua
5
-
doggo ur givin me a spook corgo heckin good boys heck much ruin diet, ur givin me a spook doggo
6
-
such treat ur givin me a spook. What a nice floof extremely cuuuuuute waggy wags floofs dat
7
-
tungg tho puggorino, smol aqua doggo dat tungg tho h*ck, sub woofer long doggo snoot you are
8
-
doing me a frighten. Boofers heck porgo adorable doggo, many pats heckin good boys. Big ol blop
9
-
very good spot aqua doggo, dat tungg tho pats smol borking doggo with a long snoot for pats,
10
-
long bois smol. Lotsa pats borkf stop it fren heckin pupperino woofer, such treat very hand that
11
-
feed shibe doge fluffer. what a nice floof vvv you are doin me a concern. Ruff you are doing me
12
-
the shock boofers borkf smol borking doggo with a long snoot for pats, fluffer stop it fren many
13
-
pats, doing me a frighten mlem ur givin me a spook. Stop it fren smol wow such tempt blep long
14
-
woofer boofers, lotsa pats shooberino doge. corgo maximum borkdrive shibe. Many pats shoob
15
-
heckin good boys I am bekom fat woofer, sub woofer long woofer. Very taste wow boof you are
16
-
doing me a frighten very good spot boofers, stop it fren mlem. Length boy lotsa pats wow very
17
-
biscit, blop. Snoot doggo length boy blep, length boy doing me a frighten. Big ol smol very
18
-
taste wow adorable doggo, extremely cuuuuuute. borking doggo boofers. Long woofer porgo dat
19
-
tungg tho boofers, blop borkdrive, h*ck mlem. Doing me a frighten long doggo blep such treat,
20
-
adorable doggo smol. Such treat smol long bois most angery pupper I have ever seen, big ol
21
-
pupper. Tungg much ruin diet fluffer shooberino blep aqua doggo, very taste wow very good spot
22
-
aqua doggo big ol pupper pupper, long doggo very taste wow borking doggo puggo. Much ruin diet
23
-
corgo you are doing me a frighten doing me a frighten, pupperino. Tungg waggy wags porgo heckin
24
-
angery woofer ruff smol borking doggo with a long snoot for pats I am bekom fat, noodle horse
25
-
thicc porgo many pats very hand that feed shibe, boof stop it fren heckin good boys and girls
26
-
length boy super chub. Blop long water shoob puggorino yapper borkf, long woofer blep. I am
27
-
bekom fat aqua doggo heck blep doggorino most angery pupper I have ever seen, pupper shoob
28
-
floofs. Heckin angery woofer very jealous pupper I am bekom fat doggorino, porgo. Aqua doggo
29
-
length boy ruff long bois shooberino, dat tungg tho very taste wow pupper. Clouds many pats doge
30
-
heckin snoot, maximum borkdrive wow such tempt you are doin me a concern. Corgo puggorino smol
31
-
borking doggo with a long snoot for pats super chub, fat boi h*ck. Dat tungg tho shoob much ruin
32
-
diet very jealous pupper, floofs shibe he made many woofs woofer, heckin good boys pupperino.`;
33
-
</script>
34
-
35
-
<ScrollArea
36
-
class="border-base-200 dark:border-base-800 text-base-900 dark:text-base-100 bg-base-100 dark:bg-base-900 h-52 w-96 max-w-full rounded-2xl border p-3"
37
-
>
38
-
{content}
39
-
</ScrollArea>
-21
apps/docs/src/routes/(main)/components/base/scroll-area/ScrollArea.md
-21
apps/docs/src/routes/(main)/components/base/scroll-area/ScrollArea.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Scroll Area
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { ScrollArea } from '@foxui/core';
16
-
</script>
17
-
18
-
<ScrollArea class="h-52 w-96">
19
-
<div>Your content here</div>
20
-
</ScrollArea>
21
-
```
-8
apps/docs/src/routes/(main)/components/base/select/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/select/+page.svelte
-15
apps/docs/src/routes/(main)/components/base/select/Example.svelte
-15
apps/docs/src/routes/(main)/components/base/select/Example.svelte
···
1
-
<script lang="ts">
2
-
import { Select } from '@foxui/core';
3
-
4
-
let selected = $state('Banana');
5
-
</script>
6
-
7
-
<Select
8
-
bind:value={selected}
9
-
type="single"
10
-
items={[
11
-
{ value: 'Apple', label: 'Apple' },
12
-
{ value: 'Orange', label: 'Orange' },
13
-
{ value: 'Banana', label: 'Banana' }
14
-
]}
15
-
/>
-29
apps/docs/src/routes/(main)/components/base/select/Select.md
-29
apps/docs/src/routes/(main)/components/base/select/Select.md
···
1
-
<script lang="ts">
2
-
import SelectExample from './Example.svelte';
3
-
</script>
4
-
5
-
# Select
6
-
7
-
## Example
8
-
9
-
<SelectExample />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script lang="ts">
15
-
import { Select } from '@foxui/core';
16
-
17
-
let selected = $state('Apple');
18
-
</script>
19
-
20
-
<Select
21
-
bind:value={selected}
22
-
type="single"
23
-
items={[
24
-
{ value: 'Apple', label: 'Apple' },
25
-
{ value: 'Orange', label: 'Orange' },
26
-
{ value: 'Banana', label: 'Banana' }
27
-
]}
28
-
/>
29
-
```
-8
apps/docs/src/routes/(main)/components/base/slider/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/slider/+page.svelte
-13
apps/docs/src/routes/(main)/components/base/slider/Example.svelte
-13
apps/docs/src/routes/(main)/components/base/slider/Example.svelte
···
1
-
<script lang="ts">
2
-
import { Slider, SliderNumber } from '@foxui/core';
3
-
4
-
let value = $state(50);
5
-
6
-
let value2 = $state(42);
7
-
</script>
8
-
9
-
<Slider bind:value type="single" />
10
-
11
-
<h3>With Number</h3>
12
-
13
-
<SliderNumber bind:value={value2} type="single" max={50} min={10} />
-24
apps/docs/src/routes/(main)/components/base/slider/Slider.md
-24
apps/docs/src/routes/(main)/components/base/slider/Slider.md
···
1
-
<script lang="ts">
2
-
import SliderExample from './Example.svelte';
3
-
</script>
4
-
5
-
# Sliders
6
-
7
-
## Example
8
-
9
-
<SliderExample />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Slider, SliderNumber } from '@foxui/core';
16
-
17
-
let value = $state(50);
18
-
</script>
19
-
20
-
<Slider bind:value min={0} max={100} />
21
-
22
-
<!-- With Number -->
23
-
<SliderNumber bind:value />
24
-
```
-8
apps/docs/src/routes/(main)/components/base/sonner/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/sonner/+page.svelte
-34
apps/docs/src/routes/(main)/components/base/sonner/Example.svelte
-34
apps/docs/src/routes/(main)/components/base/sonner/Example.svelte
···
1
-
<script lang="ts">
2
-
import { Button, toast } from '@foxui/core';
3
-
</script>
4
-
5
-
<div class="not-prose flex flex-wrap gap-4">
6
-
<Button
7
-
onclick={() =>
8
-
toast('Hello there', {
9
-
description: 'General Kenobi!'
10
-
})}>Default</Button
11
-
>
12
-
13
-
<Button
14
-
variant="green"
15
-
onclick={() =>
16
-
toast.success('Success!', {
17
-
description: "You are strong and wise and I'm very proud of you!"
18
-
})}>Success</Button
19
-
>
20
-
<Button
21
-
variant="red"
22
-
onclick={() =>
23
-
toast.error('Error!', {
24
-
description: 'These are not the droids you are looking for.'
25
-
})}>Error</Button
26
-
>
27
-
<Button
28
-
variant="blue"
29
-
onclick={() =>
30
-
toast.info('Info!', {
31
-
description: 'I heard spinning is a good trick.'
32
-
})}>Info</Button
33
-
>
34
-
</div>
-35
apps/docs/src/routes/(main)/components/base/sonner/Sonner.md
-35
apps/docs/src/routes/(main)/components/base/sonner/Sonner.md
···
1
-
<script lang="ts">
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Sonner
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
In your root layout:
14
-
15
-
```svelte
16
-
<script>
17
-
import { Toaster } from '@foxui/core';
18
-
</script>
19
-
20
-
<Toaster />
21
-
```
22
-
23
-
In your page:
24
-
25
-
```svelte
26
-
<script>
27
-
import { Button, toast } from '@foxui/core';
28
-
29
-
function handleClick() {
30
-
toast('Hello there', { description: 'General Kenobi!' });
31
-
}
32
-
</script>
33
-
34
-
<Button onclick={handleClick}>Default</Button>
35
-
```
-8
apps/docs/src/routes/(main)/components/base/switch/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/switch/+page.svelte
-25
apps/docs/src/routes/(main)/components/base/switch/Example.svelte
-25
apps/docs/src/routes/(main)/components/base/switch/Example.svelte
···
1
-
<script>
2
-
import { Switch, Label } from '@foxui/core';
3
-
4
-
let checked = $state(false);
5
-
let checked2 = $state(true);
6
-
</script>
7
-
8
-
<div class="not-prose flex flex-col gap-2">
9
-
<Switch bind:checked onCheckedChange={() => (checked2 = !checked2)} />
10
-
<Switch bind:checked={checked2} onCheckedChange={() => (checked = !checked)} />
11
-
<Switch disabled />
12
-
</div>
13
-
14
-
<h3>With Label</h3>
15
-
16
-
<div class="not-prose flex items-center space-x-2">
17
-
<Switch id="terms-switch" aria-labelledby="terms-switch-label" />
18
-
<Label
19
-
id="terms-switch-label"
20
-
for="terms-switch"
21
-
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
22
-
>
23
-
Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
24
-
</Label>
25
-
</div>
-21
apps/docs/src/routes/(main)/components/base/switch/Switch.md
-21
apps/docs/src/routes/(main)/components/base/switch/Switch.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Switch
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Switch } from '@foxui/core';
16
-
17
-
let checked = $state(false);
18
-
</script>
19
-
20
-
<Switch bind:checked />
21
-
```
-8
apps/docs/src/routes/(main)/components/base/tabs/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/tabs/+page.svelte
-14
apps/docs/src/routes/(main)/components/base/tabs/Example.svelte
-14
apps/docs/src/routes/(main)/components/base/tabs/Example.svelte
···
1
-
<script>
2
-
import { Tabs } from '@foxui/core';
3
-
4
-
let active = $state('Tab 1');
5
-
</script>
6
-
7
-
<Tabs
8
-
items={[
9
-
{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
10
-
{ name: 'Tab 2', onclick: () => (active = 'Tab 2') },
11
-
{ name: 'Tab 3', onclick: () => (active = 'Tab 3') }
12
-
]}
13
-
active={active}
14
-
/>
-28
apps/docs/src/routes/(main)/components/base/tabs/Tabs.md
-28
apps/docs/src/routes/(main)/components/base/tabs/Tabs.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Tabs
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Tabs } from '@foxui/core';
16
-
17
-
let active = $state('Tab 1');
18
-
</script>
19
-
20
-
<!-- alternatively you can also supply a href for each tab -->
21
-
<Tabs
22
-
items={[
23
-
{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
24
-
{ name: 'Tab 2', onclick: () => (active = 'Tab 2') }
25
-
]}
26
-
active={active}
27
-
/>
28
-
```
-8
apps/docs/src/routes/(main)/components/base/textarea/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/textarea/+page.svelte
-19
apps/docs/src/routes/(main)/components/base/textarea/Example.svelte
-19
apps/docs/src/routes/(main)/components/base/textarea/Example.svelte
···
1
-
<script>
2
-
import { Textarea } from '@foxui/core';
3
-
</script>
4
-
5
-
<h3>Primary</h3>
6
-
7
-
<div class="flex flex-col gap-2 md:flex-row">
8
-
<Textarea placeholder="Enter text here (small)" sizeVariant="sm" />
9
-
<Textarea placeholder="Enter text here (default)" />
10
-
<Textarea placeholder="Enter text here (large)" sizeVariant="lg" />
11
-
</div>
12
-
13
-
<h3>Secondary</h3>
14
-
15
-
<div class="flex flex-col gap-2 md:flex-row">
16
-
<Textarea placeholder="Enter text here (small)" variant="secondary" sizeVariant="sm" />
17
-
<Textarea placeholder="Enter text here (default)" variant="secondary" />
18
-
<Textarea placeholder="Enter text here (large)" variant="secondary" sizeVariant="lg" />
19
-
</div>
-21
apps/docs/src/routes/(main)/components/base/textarea/Textarea.md
-21
apps/docs/src/routes/(main)/components/base/textarea/Textarea.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Textarea
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Textarea } from '@foxui/core';
16
-
17
-
let value = $state('');
18
-
</script>
19
-
20
-
<Textarea placeholder="Enter text here" bind:value />
21
-
```
-8
apps/docs/src/routes/(main)/components/base/toggle-group/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/toggle-group/+page.svelte
-52
apps/docs/src/routes/(main)/components/base/toggle-group/Example.svelte
-52
apps/docs/src/routes/(main)/components/base/toggle-group/Example.svelte
···
1
-
<script>
2
-
import { ToggleGroup, ToggleGroupItem } from '@foxui/core';
3
-
</script>
4
-
5
-
<div class="flex items-center gap-2">
6
-
<ToggleGroup type="single" value="1">
7
-
<ToggleGroupItem value="1">1</ToggleGroupItem>
8
-
<ToggleGroupItem value="2">2</ToggleGroupItem>
9
-
<ToggleGroupItem value="3">3</ToggleGroupItem>
10
-
</ToggleGroup>
11
-
12
-
<ToggleGroup type="single">
13
-
<ToggleGroupItem value="1"
14
-
><svg
15
-
xmlns="http://www.w3.org/2000/svg"
16
-
viewBox="0 0 24 24"
17
-
fill="currentColor"
18
-
class="size-6"
19
-
>
20
-
<path
21
-
d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
22
-
/>
23
-
</svg>
24
-
</ToggleGroupItem>
25
-
<ToggleGroupItem value="2"
26
-
><svg
27
-
xmlns="http://www.w3.org/2000/svg"
28
-
viewBox="0 0 24 24"
29
-
fill="currentColor"
30
-
class="size-6"
31
-
>
32
-
<path
33
-
d="M12 1.5a.75.75 0 0 1 .75.75V7.5h-1.5V2.25A.75.75 0 0 1 12 1.5ZM11.25 7.5v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V7.5h3.75a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h3.75Z"
34
-
/>
35
-
</svg>
36
-
</ToggleGroupItem>
37
-
<ToggleGroupItem value="3"
38
-
><svg
39
-
xmlns="http://www.w3.org/2000/svg"
40
-
viewBox="0 0 24 24"
41
-
fill="currentColor"
42
-
class="size-6"
43
-
>
44
-
<path
45
-
fill-rule="evenodd"
46
-
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
47
-
clip-rule="evenodd"
48
-
/>
49
-
</svg>
50
-
</ToggleGroupItem>
51
-
</ToggleGroup>
52
-
</div>
-25
apps/docs/src/routes/(main)/components/base/toggle-group/ToggleGroup.md
-25
apps/docs/src/routes/(main)/components/base/toggle-group/ToggleGroup.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Toggle Group
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { ToggleGroup, ToggleGroupItem } from '@foxui/core';
16
-
17
-
let value = $state('1');
18
-
</script>
19
-
20
-
<ToggleGroup type="single" bind:value>
21
-
<ToggleGroupItem value="1">1</ToggleGroupItem>
22
-
<ToggleGroupItem value="2">2</ToggleGroupItem>
23
-
<ToggleGroupItem value="3">3</ToggleGroupItem>
24
-
</ToggleGroup>
25
-
```
-8
apps/docs/src/routes/(main)/components/base/toggle/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/toggle/+page.svelte
-63
apps/docs/src/routes/(main)/components/base/toggle/Example.svelte
-63
apps/docs/src/routes/(main)/components/base/toggle/Example.svelte
···
1
-
<script>
2
-
import { Toggle } from '@foxui/core';
3
-
</script>
4
-
5
-
<div class="flex items-center gap-2">
6
-
<Toggle>Toggle</Toggle>
7
-
8
-
<Toggle
9
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
10
-
<path
11
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
12
-
/>
13
-
<path
14
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
15
-
/>
16
-
<path
17
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
18
-
/>
19
-
</svg>
20
-
</Toggle>
21
-
<Toggle size="sm"
22
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
-
<path
24
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
25
-
/>
26
-
<path
27
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
28
-
/>
29
-
<path
30
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
31
-
/>
32
-
</svg>
33
-
</Toggle>
34
-
35
-
<Toggle size="lg"
36
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
37
-
<path
38
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
39
-
/>
40
-
<path
41
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
42
-
/>
43
-
<path
44
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
45
-
/>
46
-
</svg>
47
-
</Toggle>
48
-
49
-
<Toggle
50
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
51
-
<path
52
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
53
-
/>
54
-
<path
55
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
56
-
/>
57
-
<path
58
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
59
-
/>
60
-
</svg>
61
-
Toggle
62
-
</Toggle>
63
-
</div>
-21
apps/docs/src/routes/(main)/components/base/toggle/Toggle.md
-21
apps/docs/src/routes/(main)/components/base/toggle/Toggle.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Toggle
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Toggle } from '@foxui/core';
16
-
17
-
let pressed = $state(false);
18
-
</script>
19
-
20
-
<Toggle bind:pressed>Toggle</Toggle>
21
-
```
-8
apps/docs/src/routes/(main)/components/base/tooltip/+page.svelte
-8
apps/docs/src/routes/(main)/components/base/tooltip/+page.svelte
-15
apps/docs/src/routes/(main)/components/base/tooltip/Example.svelte
-15
apps/docs/src/routes/(main)/components/base/tooltip/Example.svelte
···
1
-
<script>
2
-
import { Tooltip, Button, toast } from '@foxui/core';
3
-
4
-
function handleClick() {
5
-
toast.error("Don't click, just hover!");
6
-
}
7
-
</script>
8
-
9
-
<div class="flex w-full flex-col items-start gap-2 py-12">
10
-
<Tooltip text="Hello there!" withContext>
11
-
{#snippet child({ props })}
12
-
<Button {...props} onclick={handleClick}>Hover me</Button>
13
-
{/snippet}
14
-
</Tooltip>
15
-
</div>
-27
apps/docs/src/routes/(main)/components/base/tooltip/Tooltip.md
-27
apps/docs/src/routes/(main)/components/base/tooltip/Tooltip.md
···
1
-
<script>
2
-
import Example from './Example.svelte';
3
-
</script>
4
-
5
-
# Tooltip
6
-
7
-
## Example
8
-
9
-
<Example />
10
-
11
-
## Usage
12
-
13
-
```svelte
14
-
<script>
15
-
import { Tooltip, Button } from '@foxui/core';
16
-
17
-
function handleClick() {
18
-
console.log('clicked');
19
-
}
20
-
</script>
21
-
22
-
<Tooltip text="Hello there!" withContext>
23
-
{#snippet child({ props })}
24
-
<Button {...props} onclick={handleClick}>Hover me</Button>
25
-
{/snippet}
26
-
</Tooltip>
27
-
```
+8
apps/docs/src/routes/(main)/components/core/accordion/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/accordion/+page.svelte
+35
apps/docs/src/routes/(main)/components/core/accordion/Accordion.md
+35
apps/docs/src/routes/(main)/components/core/accordion/Accordion.md
···
1
+
<script lang="ts">
2
+
import AccordionExample from './Example.svelte';
3
+
import AccordionProps from './Props.svelte';
4
+
</script>
5
+
6
+
# Accordion
7
+
8
+
## Example
9
+
10
+
<AccordionExample />
11
+
12
+
## Usage
13
+
14
+
```svelte
15
+
<script lang="ts">
16
+
import { Accordion, AccordionItem } from '@foxui/core';
17
+
</script>
18
+
19
+
<Accordion type="single">
20
+
<AccordionItem title="Is it accessible?">
21
+
Yes. It adheres to the WAI-ARIA design pattern.
22
+
</AccordionItem>
23
+
<AccordionItem title="Are you sure?">
24
+
I mean, I hope so? It's based on the bits-ui accordion component, so if not it's not my fault 😅
25
+
</AccordionItem>
26
+
</Accordion>
27
+
```
28
+
29
+
## API Reference
30
+
31
+
<AccordionProps />
32
+
33
+
## Credits
34
+
35
+
This component is based on the [bits-ui accordion component](https://bits-ui.com/docs/components/accordion).
+15
apps/docs/src/routes/(main)/components/core/accordion/Example.svelte
+15
apps/docs/src/routes/(main)/components/core/accordion/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Accordion, AccordionItem } from '@foxui/core';
3
+
</script>
4
+
5
+
<Accordion type="single">
6
+
<AccordionItem title="Is it accessible?">
7
+
Yes. It adheres to the WAI-ARIA design pattern.
8
+
</AccordionItem>
9
+
<AccordionItem title="Are you sure?">
10
+
I mean, I hope so? It's based on the <a
11
+
href="https://bits-ui.com/docs/components/accordion"
12
+
target="_blank">bits-ui accordion component</a
13
+
>, so if not it's not my fault 😅
14
+
</AccordionItem>
15
+
</Accordion>
+83
apps/docs/src/routes/(main)/components/core/accordion/Props.svelte
+83
apps/docs/src/routes/(main)/components/core/accordion/Props.svelte
···
1
+
<script>
2
+
import Api from '$lib/site-components/API.svelte';
3
+
</script>
4
+
5
+
<Api
6
+
props={{
7
+
title: 'Accordion',
8
+
props: {
9
+
children: {
10
+
type: 'Snippet',
11
+
description:
12
+
'The children content to render. Should be a list of AccordionItem components.',
13
+
required: true
14
+
},
15
+
type: {
16
+
type: { type: 'enum', definition: "'single' | 'multiple'" },
17
+
description:
18
+
"If set to 'multiple', the accordion will allow multiple items to be open at the same time. If set to single, the accordion will only allow a single item to be open.",
19
+
required: true
20
+
},
21
+
value: {
22
+
type: { type: 'union', definition: 'string | string[]' },
23
+
description:
24
+
'The value of the accordion item that is currently open. If type is set to "multiple", this will be an array of strings. If type is set to "single", this will be a string.',
25
+
bindable: true
26
+
},
27
+
onValueChange: {
28
+
type: {
29
+
type: 'function',
30
+
definition: '(value: string) => void | (value: string[]) => void'
31
+
},
32
+
description: 'A function that is called when the value of the accordion item changes.'
33
+
},
34
+
disabled: {
35
+
type: 'boolean',
36
+
description: 'Whether the accordion is disabled.',
37
+
default: 'false'
38
+
},
39
+
ref: {
40
+
type: 'HTMLDivElement',
41
+
description:
42
+
'The underlying DOM element being rendered. You can bind to this to get a reference to the element.',
43
+
bindable: true
44
+
}
45
+
}
46
+
}}
47
+
/>
48
+
49
+
<Api
50
+
props={{
51
+
title: 'AccordionItem',
52
+
props: {
53
+
title: {
54
+
type: 'string',
55
+
description:
56
+
'The title of the accordion item, displayed both when the item is closed or open.',
57
+
required: true
58
+
},
59
+
children: {
60
+
type: 'Snippet',
61
+
description:
62
+
'The children content to render. The content is displayed when the item is open.',
63
+
required: true
64
+
},
65
+
value: {
66
+
type: 'string',
67
+
description:
68
+
'The value of the accordion item. This is used to identify when the item is open or closed. If not provided, a unique ID will be generated for this value.'
69
+
},
70
+
disabled: {
71
+
type: 'boolean',
72
+
description: 'Whether the accordion item is disabled.',
73
+
default: 'false'
74
+
},
75
+
ref: {
76
+
type: 'HTMLDivElement',
77
+
description:
78
+
'The underlying DOM element being rendered. You can bind to this to get a reference to the element.',
79
+
bindable: true
80
+
}
81
+
}
82
+
}}
83
+
/>
+8
apps/docs/src/routes/(main)/components/core/alert/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/alert/+page.svelte
+21
apps/docs/src/routes/(main)/components/core/alert/Alert.md
+21
apps/docs/src/routes/(main)/components/core/alert/Alert.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Alert
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Alert } from '@foxui/core';
16
+
</script>
17
+
18
+
<Alert title="Alert Title" type="info">
19
+
<span>Alert Description</span>
20
+
</Alert>
21
+
```
+55
apps/docs/src/routes/(main)/components/core/alert/Example.svelte
+55
apps/docs/src/routes/(main)/components/core/alert/Example.svelte
···
1
+
<script>
2
+
import { Alert, AlertDescription, AlertTitle } from '@foxui/core';
3
+
</script>
4
+
5
+
<Alert class="mb-2">
6
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
7
+
<path
8
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
9
+
/>
10
+
<path
11
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
12
+
/>
13
+
<path
14
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
15
+
/>
16
+
</svg>
17
+
<AlertTitle class="text-rose-500 dark:text-rose-500">Default Alert</AlertTitle>
18
+
<AlertDescription>Alert Description</AlertDescription>
19
+
</Alert>
20
+
21
+
<Alert variant="secondary" class="mb-4">
22
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
+
<path
24
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
25
+
/>
26
+
<path
27
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
28
+
/>
29
+
<path
30
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
31
+
/>
32
+
</svg>
33
+
<AlertTitle>Secondary Alert</AlertTitle>
34
+
<AlertDescription>Alert Description</AlertDescription>
35
+
</Alert>
36
+
37
+
<h3>Preset Alerts</h3>
38
+
39
+
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
40
+
<Alert title="Warning alert" type="warning">
41
+
<span>Alert Description</span>
42
+
</Alert>
43
+
44
+
<Alert title="Error alert" type="error">
45
+
<span>Alert Description</span>
46
+
</Alert>
47
+
48
+
<Alert title="Success alert" type="success">
49
+
<span>Alert Description</span>
50
+
</Alert>
51
+
52
+
<Alert title="Info alert" type="info">
53
+
<span>Alert Description</span>
54
+
</Alert>
55
+
</div>
+8
apps/docs/src/routes/(main)/components/core/avatar/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/avatar/+page.svelte
+34
apps/docs/src/routes/(main)/components/core/avatar/Avatar.md
+34
apps/docs/src/routes/(main)/components/core/avatar/Avatar.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Avatar
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Avatar, AvatarGroup } from '@foxui/core';
16
+
</script>
17
+
18
+
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />
19
+
20
+
<AvatarGroup
21
+
users={[
22
+
{
23
+
src: 'https://github.com/flo-bit.png',
24
+
alt: 'flo-bit',
25
+
fallback: 'FB'
26
+
},
27
+
{
28
+
src: 'https://github.com/rich-harris.png',
29
+
alt: 'rich-harris',
30
+
fallback: 'RH'
31
+
}
32
+
]}
33
+
/>
34
+
```
+35
apps/docs/src/routes/(main)/components/core/avatar/Example.svelte
+35
apps/docs/src/routes/(main)/components/core/avatar/Example.svelte
···
1
+
<script>
2
+
import { Avatar, AvatarGroup } from '@foxui/core';
3
+
</script>
4
+
5
+
<h3>Single Avatar</h3>
6
+
7
+
<div class="not-prose flex items-center gap-2">
8
+
<Avatar fallback="AB" />
9
+
<Avatar />
10
+
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />
11
+
</div>
12
+
13
+
<h3>Avatars Group</h3>
14
+
15
+
<AvatarGroup
16
+
users={[
17
+
{
18
+
src: 'https://github.com/flo-bit.png',
19
+
alt: 'flo-bit',
20
+
fallback: 'FB'
21
+
},
22
+
{
23
+
src: 'https://github.com/rich-harris.png',
24
+
alt: 'rich-harris'
25
+
},
26
+
{
27
+
src: 'https://github.com/huntabyte.png',
28
+
alt: 'huntabyte'
29
+
},
30
+
{
31
+
fallback: '+5'
32
+
}
33
+
]}
34
+
class="not-prose"
35
+
/>
+8
apps/docs/src/routes/(main)/components/core/badge/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/badge/+page.svelte
+19
apps/docs/src/routes/(main)/components/core/badge/Badge.md
+19
apps/docs/src/routes/(main)/components/core/badge/Badge.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Badge
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Badge } from '@foxui/core';
16
+
</script>
17
+
18
+
<Badge size="sm" variant="primary">Badge</Badge>
19
+
```
+77
apps/docs/src/routes/(main)/components/core/badge/Example.svelte
+77
apps/docs/src/routes/(main)/components/core/badge/Example.svelte
···
1
+
<script>
2
+
import { Badge } from '@foxui/core';
3
+
</script>
4
+
5
+
<h3>Primary</h3>
6
+
7
+
<div class="flex items-center gap-2">
8
+
<Badge size="sm"
9
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
10
+
<path
11
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
12
+
/>
13
+
<path
14
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
15
+
/>
16
+
<path
17
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
18
+
/>
19
+
</svg>default</Badge
20
+
>
21
+
<Badge size="md"
22
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
+
<path
24
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
25
+
/>
26
+
<path
27
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
28
+
/>
29
+
<path
30
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
31
+
/>
32
+
</svg>md</Badge
33
+
>
34
+
<Badge size="lg"
35
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
36
+
<path
37
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
38
+
/>
39
+
<path
40
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
41
+
/>
42
+
<path
43
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
44
+
/>
45
+
</svg>lg</Badge
46
+
>
47
+
</div>
48
+
49
+
<h3>Secondary</h3>
50
+
51
+
<div class="flex items-center gap-2">
52
+
<Badge size="sm" variant="secondary">Badge</Badge>
53
+
<Badge size="md" variant="secondary">Badge</Badge>
54
+
<Badge size="lg" variant="secondary">Badge</Badge>
55
+
</div>
56
+
57
+
<h3>Colors</h3>
58
+
59
+
<div class="flex flex-wrap items-center gap-2">
60
+
<Badge variant="red">Red</Badge>
61
+
<Badge variant="yellow">Yellow</Badge>
62
+
<Badge variant="green">Green</Badge>
63
+
<Badge variant="blue">Blue</Badge>
64
+
<Badge variant="indigo">Indigo</Badge>
65
+
<Badge variant="violet">Violet</Badge>
66
+
<Badge variant="purple">Purple</Badge>
67
+
<Badge variant="fuchsia">Fuchsia</Badge>
68
+
<Badge variant="pink">Pink</Badge>
69
+
<Badge variant="rose">Rose</Badge>
70
+
<Badge variant="orange">Orange</Badge>
71
+
<Badge variant="amber">Amber</Badge>
72
+
<Badge variant="lime">Lime</Badge>
73
+
<Badge variant="emerald">Emerald</Badge>
74
+
<Badge variant="teal">Teal</Badge>
75
+
<Badge variant="cyan">Cyan</Badge>
76
+
<Badge variant="sky">Sky</Badge>
77
+
</div>
+8
apps/docs/src/routes/(main)/components/core/box/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/box/+page.svelte
+19
apps/docs/src/routes/(main)/components/core/box/Box.md
+19
apps/docs/src/routes/(main)/components/core/box/Box.md
···
1
+
<script>
2
+
import { Box } from '@foxui/core';
3
+
</script>
4
+
5
+
# Box
6
+
7
+
## Examples
8
+
9
+
<Box class="text-sm">This is a box, put your stuff here.</Box>
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Box } from '@foxui/core';
16
+
</script>
17
+
18
+
<Box class="text-sm">This is a box, put your stuff here.</Box>
19
+
```
+8
apps/docs/src/routes/(main)/components/core/cards/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/cards/+page.svelte
+19
apps/docs/src/routes/(main)/components/core/cards/Cards.md
+19
apps/docs/src/routes/(main)/components/core/cards/Cards.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Image card
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { ImageCard } from '@foxui/core';
16
+
</script>
17
+
18
+
<ImageCard src={'/image.jpg'} alt="" title="Card title" description="Card description" href="#" />
19
+
```
+43
apps/docs/src/routes/(main)/components/core/cards/Example.svelte
+43
apps/docs/src/routes/(main)/components/core/cards/Example.svelte
···
1
+
<script>
2
+
import { ImageCard, toast} from '@foxui/core';
3
+
4
+
import nature1 from '$lib/assets/images/nature1.webp';
5
+
import nature2 from '$lib/assets/images/nature2.webp';
6
+
import nature3 from '$lib/assets/images/nature3.webp';
7
+
</script>
8
+
9
+
<h3>Full width</h3>
10
+
11
+
<ImageCard
12
+
src={nature1}
13
+
alt="Nature 1"
14
+
title="Hello World"
15
+
description="Just wanted to say hello to everyone on this beautiful planet, been traveling a lot lately and wanted to share some of the places I've been to."
16
+
href="#"
17
+
class="not-prose mb-16"
18
+
/>
19
+
20
+
<h3>In a grid</h3>
21
+
22
+
<div class="not-prose grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
23
+
<ImageCard
24
+
src={nature1}
25
+
alt="Nature 1"
26
+
title="Best places to visit"
27
+
description="This is such a long description, that it will probably be cut off and truncated after the first two lines."
28
+
href="#"
29
+
/>
30
+
<ImageCard
31
+
src={nature2}
32
+
alt="Nature 2"
33
+
title="This is a beautiful place"
34
+
description="This card will show a toast when clicked"
35
+
onclick={() => toast('Hello World')}
36
+
/>
37
+
<ImageCard
38
+
src={nature3}
39
+
alt="Nature 3"
40
+
title="Traveling is fun"
41
+
description="But this card is not clickable"
42
+
/>
43
+
</div>
+8
apps/docs/src/routes/(main)/components/core/chat-bubble/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/chat-bubble/+page.svelte
+25
apps/docs/src/routes/(main)/components/core/chat-bubble/ChatBubble.md
+25
apps/docs/src/routes/(main)/components/core/chat-bubble/ChatBubble.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Chat Bubble
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { ChatBubble } from '@foxui/core';
16
+
</script>
17
+
18
+
<ChatBubble side="right">
19
+
<p>Hello there</p>
20
+
</ChatBubble>
21
+
22
+
<ChatBubble>
23
+
<p>General Kenobi</p>
24
+
</ChatBubble>
25
+
```
+30
apps/docs/src/routes/(main)/components/core/chat-bubble/Example.svelte
+30
apps/docs/src/routes/(main)/components/core/chat-bubble/Example.svelte
···
1
+
<script>
2
+
import { Box, ChatBubble, ImageContainer } from '@foxui/core';
3
+
4
+
import cute from '$lib/assets/images/cute.webp';
5
+
</script>
6
+
7
+
<Box class="not-prose flex flex-col gap-3">
8
+
<ChatBubble side="right">
9
+
<p>Hello there</p>
10
+
</ChatBubble>
11
+
12
+
<ChatBubble>
13
+
<p>General Kenobi</p>
14
+
</ChatBubble>
15
+
16
+
<ChatBubble side="right">
17
+
<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
18
+
</ChatBubble>
19
+
<ChatBubble>
20
+
<p>
21
+
This is another really long message that should wrap around the chat bubble and not overflow
22
+
</p>
23
+
</ChatBubble>
24
+
25
+
<ChatBubble side="right">
26
+
<p>This is me sending you an image</p>
27
+
28
+
<ImageContainer src={cute} alt="cute cat" containerClasses="-mx-1.5 rounded-xl" />
29
+
</ChatBubble>
30
+
</Box>
+8
apps/docs/src/routes/(main)/components/core/checkbox/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/checkbox/+page.svelte
+21
apps/docs/src/routes/(main)/components/core/checkbox/Checkbox.md
+21
apps/docs/src/routes/(main)/components/core/checkbox/Checkbox.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Checkbox
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Checkbox } from '@foxui/core';
16
+
17
+
let checked = $state(false);
18
+
</script>
19
+
20
+
<Checkbox sizeVariant="sm" variant="primary" bind:checked />
21
+
```
+32
apps/docs/src/routes/(main)/components/core/checkbox/Example.svelte
+32
apps/docs/src/routes/(main)/components/core/checkbox/Example.svelte
···
1
+
<script>
2
+
import { Checkbox, Label } from '@foxui/core';
3
+
</script>
4
+
5
+
<h3>Primary</h3>
6
+
7
+
<div class="flex items-center gap-2">
8
+
<Checkbox sizeVariant="sm" variant="primary" />
9
+
<Checkbox sizeVariant="default" variant="primary" />
10
+
<Checkbox sizeVariant="lg" variant="primary" />
11
+
</div>
12
+
13
+
<h3>Secondary</h3>
14
+
15
+
<div class="flex items-center gap-2">
16
+
<Checkbox sizeVariant="sm" variant="secondary" />
17
+
<Checkbox sizeVariant="default" variant="secondary" />
18
+
<Checkbox sizeVariant="lg" variant="secondary" />
19
+
</div>
20
+
21
+
<h3>With Label</h3>
22
+
23
+
<div class="not-prose flex items-center space-x-2">
24
+
<Checkbox id="terms" aria-labelledby="terms-label" variant="secondary" />
25
+
<Label
26
+
id="terms-label"
27
+
for="terms"
28
+
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
29
+
>
30
+
Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
31
+
</Label>
32
+
</div>
+8
apps/docs/src/routes/(main)/components/core/head/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/head/+page.svelte
+21
apps/docs/src/routes/(main)/components/core/head/Head.md
+21
apps/docs/src/routes/(main)/components/core/head/Head.md
···
1
+
# Head
2
+
3
+
Sets title, description, open graph image, url and emoji favicon.
4
+
5
+
It's recommended to add this to your root layout.
6
+
7
+
## Usage
8
+
9
+
```svelte
10
+
<script>
11
+
import { Head } from '@foxui/core';
12
+
</script>
13
+
14
+
<Head
15
+
title="Website Title"
16
+
description="Website Description"
17
+
image="open-graph-image.png"
18
+
url="https://website-url.com"
19
+
emojiFavicon="🦊"
20
+
/>
21
+
```
+8
apps/docs/src/routes/(main)/components/core/image/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/image/+page.svelte
+27
apps/docs/src/routes/(main)/components/core/image/Example.svelte
+27
apps/docs/src/routes/(main)/components/core/image/Example.svelte
···
1
+
<script>
2
+
import { ImageContainer } from '@foxui/core';
3
+
4
+
import cute from '$lib/assets/images/cute.webp';
5
+
import cute2 from '$lib/assets/images/cute2.webp';
6
+
</script>
7
+
8
+
<ImageContainer src={cute} alt="Such a cute animal" containerClasses="not-prose max-w-64" />
9
+
10
+
<h3>Overlay theme color</h3>
11
+
12
+
<ImageContainer
13
+
src={cute2}
14
+
alt="Another cute animal"
15
+
useThemeColor={true}
16
+
containerClasses="max-w-44 not-prose"
17
+
/>
18
+
19
+
<h3>Show normal image on hover</h3>
20
+
21
+
<ImageContainer
22
+
src={cute2}
23
+
alt="Another cute animal"
24
+
useThemeColor={true}
25
+
containerClasses="max-w-44 not-prose"
26
+
showNormalOnHover={true}
27
+
/>
+21
apps/docs/src/routes/(main)/components/core/image/Image.md
+21
apps/docs/src/routes/(main)/components/core/image/Image.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Image
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { ImageContainer } from '@foxui/core';
16
+
</script>
17
+
18
+
<ImageContainer src="/image.jpg" alt="Alt tag" />
19
+
20
+
<ImageContainer src="/image.jpg" alt="Alt tag" useThemeColor showNormalOnHover />
21
+
```
+8
apps/docs/src/routes/(main)/components/core/input/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/input/+page.svelte
+19
apps/docs/src/routes/(main)/components/core/input/Example.svelte
+19
apps/docs/src/routes/(main)/components/core/input/Example.svelte
···
1
+
<script>
2
+
import { Input } from '@foxui/core';
3
+
</script>
4
+
5
+
<h3>Primary</h3>
6
+
7
+
<div class="flex w-fit flex-col gap-4">
8
+
<Input sizeVariant="sm" placeholder="Enter text here (small)" />
9
+
<Input placeholder="Enter text here (default)" />
10
+
<Input sizeVariant="lg" placeholder="Enter text here (large)" />
11
+
</div>
12
+
13
+
<h3>Secondary</h3>
14
+
15
+
<div class="flex w-fit flex-col gap-4">
16
+
<Input variant="secondary" sizeVariant="sm" placeholder="Enter text here (small)" />
17
+
<Input variant="secondary" placeholder="Enter text here (default)" />
18
+
<Input variant="secondary" sizeVariant="lg" placeholder="Enter text here (large)" />
19
+
</div>
+21
apps/docs/src/routes/(main)/components/core/input/Input.md
+21
apps/docs/src/routes/(main)/components/core/input/Input.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Input
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Input } from '@foxui/core';
16
+
17
+
let value = $state('');
18
+
</script>
19
+
20
+
<Input sizeVariant="sm" placeholder="Enter text here" bind:value />
21
+
```
+8
apps/docs/src/routes/(main)/components/core/modal/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/modal/+page.svelte
+35
apps/docs/src/routes/(main)/components/core/modal/Example.svelte
+35
apps/docs/src/routes/(main)/components/core/modal/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Button, Modal, toast, ImageContainer, Subheading } from '@foxui/core';
3
+
4
+
import cute from '$lib/assets/images/cute.webp';
5
+
6
+
let openDefault = $state(false);
7
+
let openCustom = $state(false);
8
+
</script>
9
+
10
+
<Button onclick={() => (openDefault = true)}>Default Modal</Button>
11
+
12
+
<Button onclick={() => (openCustom = true)} variant="secondary">Custom Modal</Button>
13
+
14
+
<Modal
15
+
bind:open={openDefault}
16
+
title="This is the default modal"
17
+
description="It has a title, description, and two buttons (yes and no)"
18
+
yesButton={{ onclick: () => toast('Yes', { description: 'Smart choice' }) }}
19
+
noButton={{ onclick: () => toast('No', { description: 'Why not though?' }) }}
20
+
/>
21
+
22
+
<Modal bind:open={openCustom} closeButton={false}>
23
+
<Subheading>
24
+
You can put anything in here... Like an image:
25
+
</Subheading>
26
+
27
+
<ImageContainer
28
+
src={cute}
29
+
alt="image in modal"
30
+
useThemeColor
31
+
containerClasses="max-w-64 mx-auto"
32
+
/>
33
+
34
+
<Button onclick={() => (openCustom = false)}>Cool</Button>
35
+
</Modal>
+28
apps/docs/src/routes/(main)/components/core/modal/Modal.md
+28
apps/docs/src/routes/(main)/components/core/modal/Modal.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Modal
6
+
7
+
## Examples
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Modal, Button } from '@foxui/core';
16
+
17
+
let open = $state(false);
18
+
</script>
19
+
20
+
<Modal
21
+
bind:open
22
+
title="This is the default modal"
23
+
yesButton={{ onclick: () => console.log('yes') }}
24
+
noButton={{ onclick: () => console.log('no') }}
25
+
/>
26
+
27
+
<Button onclick={() => (open = true)}>Open modal</Button>
28
+
```
+8
apps/docs/src/routes/(main)/components/core/number-input/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/number-input/+page.svelte
+25
apps/docs/src/routes/(main)/components/core/number-input/NumberInput.md
+25
apps/docs/src/routes/(main)/components/core/number-input/NumberInput.md
···
1
+
<script>
2
+
import { NumberInput } from '@foxui/core';
3
+
</script>
4
+
5
+
# Number Input
6
+
7
+
## Example
8
+
9
+
<NumberInput />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { NumberInput } from '@foxui/core';
16
+
17
+
let value = $state(0);
18
+
</script>
19
+
20
+
<NumberInput min={0} max={100} bind:value />
21
+
```
22
+
23
+
## Credits
24
+
25
+
- Adapted from an example of [number-flow](https://number-flow.barvian.me/)
+8
apps/docs/src/routes/(main)/components/core/popover/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/popover/+page.svelte
+59
apps/docs/src/routes/(main)/components/core/popover/Example.svelte
+59
apps/docs/src/routes/(main)/components/core/popover/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Popover, Button, toast } from '@foxui/core';
3
+
4
+
let open = $state(false);
5
+
6
+
let colors = [
7
+
{ label: '1', value: 'oklch(from var(--color-accent-500) l c h)' },
8
+
{ label: '2', value: 'oklch(from var(--color-accent-500) l c calc(h + 40))' },
9
+
{ label: '3', value: 'oklch(from var(--color-accent-500) l c calc(h + 80))' }
10
+
];
11
+
</script>
12
+
13
+
<h3>Default trigger</h3>
14
+
15
+
<Popover triggerText="click me" triggerVariant="secondary" triggerClasses="mt-2" bind:open>
16
+
<div class="flex items-center justify-between gap-2">
17
+
<div>Are you sure?</div>
18
+
<div>
19
+
<Button
20
+
variant="secondary"
21
+
size="iconSm"
22
+
onclick={() => {
23
+
open = !open;
24
+
toast('Fair enough!');
25
+
}}
26
+
>
27
+
<svg
28
+
xmlns="http://www.w3.org/2000/svg"
29
+
fill="none"
30
+
viewBox="0 0 24 24"
31
+
stroke-width="1.5"
32
+
stroke="currentColor"
33
+
class="size-6"
34
+
>
35
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
36
+
</svg>
37
+
</Button>
38
+
39
+
<Button
40
+
size="iconSm"
41
+
onclick={() => {
42
+
open = !open;
43
+
toast('Good choice!');
44
+
}}
45
+
>
46
+
<svg
47
+
xmlns="http://www.w3.org/2000/svg"
48
+
fill="none"
49
+
viewBox="0 0 24 24"
50
+
stroke-width="1.5"
51
+
stroke="currentColor"
52
+
class="size-6"
53
+
>
54
+
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
55
+
</svg>
56
+
</Button>
57
+
</div>
58
+
</div>
59
+
</Popover>
+28
apps/docs/src/routes/(main)/components/core/popover/Popover.md
+28
apps/docs/src/routes/(main)/components/core/popover/Popover.md
···
1
+
<script lang="ts">
2
+
import PopoverExample from './Example.svelte';
3
+
</script>
4
+
5
+
# Popover
6
+
7
+
## Example
8
+
9
+
<PopoverExample />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { Popover } from '@foxui/core';
16
+
</script>
17
+
18
+
<!-- default trigger -->
19
+
<Popover triggerText="Click me" triggerVariant="secondary">Hello this is a test</Popover>
20
+
21
+
<!-- custom trigger -->
22
+
<Popover>
23
+
{#snippet child({ props })}
24
+
<button {...props} class="bg-accent-500 mt-2 size-8 cursor-pointer rounded-full"></button>
25
+
{/snippet}
26
+
Content of the popover here
27
+
</Popover>
28
+
```
+8
apps/docs/src/routes/(main)/components/core/prose/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/prose/+page.svelte
+29
apps/docs/src/routes/(main)/components/core/prose/Prose.md
+29
apps/docs/src/routes/(main)/components/core/prose/Prose.md
···
1
+
<script>
2
+
import { Box } from '@foxui/core';
3
+
</script>
4
+
5
+
# Prose
6
+
7
+
## Example
8
+
9
+
<Box>
10
+
<h1>Prose</h1>
11
+
<p>Prose is a component that renders html tags with automatic styles applied.</p>
12
+
<p>It is useful for rendering markdown content.</p>
13
+
14
+
<p>This is a link: <a href="https://google.com">Google</a></p>
15
+
</Box>
16
+
17
+
## Usage
18
+
19
+
```svelte
20
+
<script>
21
+
import Prose from '@foxui/core';
22
+
</script>
23
+
24
+
<Prose>
25
+
<h1>Prose</h1>
26
+
27
+
<p>Prose is a component</p>
28
+
</Prose>
29
+
```
+8
apps/docs/src/routes/(main)/components/core/scroll-area/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/scroll-area/+page.svelte
+39
apps/docs/src/routes/(main)/components/core/scroll-area/Example.svelte
+39
apps/docs/src/routes/(main)/components/core/scroll-area/Example.svelte
···
1
+
<script>
2
+
import { ScrollArea } from '@foxui/core';
3
+
4
+
let content = `Doggo ipsum puggorino shoob I am bekom fat. Clouds such treat big ol pupper vvv, porgo. Aqua
5
+
doggo ur givin me a spook corgo heckin good boys heck much ruin diet, ur givin me a spook doggo
6
+
such treat ur givin me a spook. What a nice floof extremely cuuuuuute waggy wags floofs dat
7
+
tungg tho puggorino, smol aqua doggo dat tungg tho h*ck, sub woofer long doggo snoot you are
8
+
doing me a frighten. Boofers heck porgo adorable doggo, many pats heckin good boys. Big ol blop
9
+
very good spot aqua doggo, dat tungg tho pats smol borking doggo with a long snoot for pats,
10
+
long bois smol. Lotsa pats borkf stop it fren heckin pupperino woofer, such treat very hand that
11
+
feed shibe doge fluffer. what a nice floof vvv you are doin me a concern. Ruff you are doing me
12
+
the shock boofers borkf smol borking doggo with a long snoot for pats, fluffer stop it fren many
13
+
pats, doing me a frighten mlem ur givin me a spook. Stop it fren smol wow such tempt blep long
14
+
woofer boofers, lotsa pats shooberino doge. corgo maximum borkdrive shibe. Many pats shoob
15
+
heckin good boys I am bekom fat woofer, sub woofer long woofer. Very taste wow boof you are
16
+
doing me a frighten very good spot boofers, stop it fren mlem. Length boy lotsa pats wow very
17
+
biscit, blop. Snoot doggo length boy blep, length boy doing me a frighten. Big ol smol very
18
+
taste wow adorable doggo, extremely cuuuuuute. borking doggo boofers. Long woofer porgo dat
19
+
tungg tho boofers, blop borkdrive, h*ck mlem. Doing me a frighten long doggo blep such treat,
20
+
adorable doggo smol. Such treat smol long bois most angery pupper I have ever seen, big ol
21
+
pupper. Tungg much ruin diet fluffer shooberino blep aqua doggo, very taste wow very good spot
22
+
aqua doggo big ol pupper pupper, long doggo very taste wow borking doggo puggo. Much ruin diet
23
+
corgo you are doing me a frighten doing me a frighten, pupperino. Tungg waggy wags porgo heckin
24
+
angery woofer ruff smol borking doggo with a long snoot for pats I am bekom fat, noodle horse
25
+
thicc porgo many pats very hand that feed shibe, boof stop it fren heckin good boys and girls
26
+
length boy super chub. Blop long water shoob puggorino yapper borkf, long woofer blep. I am
27
+
bekom fat aqua doggo heck blep doggorino most angery pupper I have ever seen, pupper shoob
28
+
floofs. Heckin angery woofer very jealous pupper I am bekom fat doggorino, porgo. Aqua doggo
29
+
length boy ruff long bois shooberino, dat tungg tho very taste wow pupper. Clouds many pats doge
30
+
heckin snoot, maximum borkdrive wow such tempt you are doin me a concern. Corgo puggorino smol
31
+
borking doggo with a long snoot for pats super chub, fat boi h*ck. Dat tungg tho shoob much ruin
32
+
diet very jealous pupper, floofs shibe he made many woofs woofer, heckin good boys pupperino.`;
33
+
</script>
34
+
35
+
<ScrollArea
36
+
class="border-base-200 dark:border-base-800 text-base-900 dark:text-base-100 bg-base-100 dark:bg-base-900 h-52 w-96 max-w-full rounded-2xl border p-3"
37
+
>
38
+
{content}
39
+
</ScrollArea>
+21
apps/docs/src/routes/(main)/components/core/scroll-area/ScrollArea.md
+21
apps/docs/src/routes/(main)/components/core/scroll-area/ScrollArea.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Scroll Area
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { ScrollArea } from '@foxui/core';
16
+
</script>
17
+
18
+
<ScrollArea class="h-52 w-96">
19
+
<div>Your content here</div>
20
+
</ScrollArea>
21
+
```
+8
apps/docs/src/routes/(main)/components/core/select/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/select/+page.svelte
+15
apps/docs/src/routes/(main)/components/core/select/Example.svelte
+15
apps/docs/src/routes/(main)/components/core/select/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Select } from '@foxui/core';
3
+
4
+
let selected = $state('Banana');
5
+
</script>
6
+
7
+
<Select
8
+
bind:value={selected}
9
+
type="single"
10
+
items={[
11
+
{ value: 'Apple', label: 'Apple' },
12
+
{ value: 'Orange', label: 'Orange' },
13
+
{ value: 'Banana', label: 'Banana' }
14
+
]}
15
+
/>
+29
apps/docs/src/routes/(main)/components/core/select/Select.md
+29
apps/docs/src/routes/(main)/components/core/select/Select.md
···
1
+
<script lang="ts">
2
+
import SelectExample from './Example.svelte';
3
+
</script>
4
+
5
+
# Select
6
+
7
+
## Example
8
+
9
+
<SelectExample />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { Select } from '@foxui/core';
16
+
17
+
let selected = $state('Apple');
18
+
</script>
19
+
20
+
<Select
21
+
bind:value={selected}
22
+
type="single"
23
+
items={[
24
+
{ value: 'Apple', label: 'Apple' },
25
+
{ value: 'Orange', label: 'Orange' },
26
+
{ value: 'Banana', label: 'Banana' }
27
+
]}
28
+
/>
29
+
```
+8
apps/docs/src/routes/(main)/components/core/slider/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/slider/+page.svelte
+13
apps/docs/src/routes/(main)/components/core/slider/Example.svelte
+13
apps/docs/src/routes/(main)/components/core/slider/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Slider, SliderNumber } from '@foxui/core';
3
+
4
+
let value = $state(50);
5
+
6
+
let value2 = $state(42);
7
+
</script>
8
+
9
+
<Slider bind:value type="single" />
10
+
11
+
<h3>With Number</h3>
12
+
13
+
<SliderNumber bind:value={value2} type="single" max={50} min={10} />
+24
apps/docs/src/routes/(main)/components/core/slider/Slider.md
+24
apps/docs/src/routes/(main)/components/core/slider/Slider.md
···
1
+
<script lang="ts">
2
+
import SliderExample from './Example.svelte';
3
+
</script>
4
+
5
+
# Sliders
6
+
7
+
## Example
8
+
9
+
<SliderExample />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Slider, SliderNumber } from '@foxui/core';
16
+
17
+
let value = $state(50);
18
+
</script>
19
+
20
+
<Slider bind:value min={0} max={100} />
21
+
22
+
<!-- With Number -->
23
+
<SliderNumber bind:value />
24
+
```
+8
apps/docs/src/routes/(main)/components/core/sonner/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/sonner/+page.svelte
+34
apps/docs/src/routes/(main)/components/core/sonner/Example.svelte
+34
apps/docs/src/routes/(main)/components/core/sonner/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Button, toast } from '@foxui/core';
3
+
</script>
4
+
5
+
<div class="not-prose flex flex-wrap gap-4">
6
+
<Button
7
+
onclick={() =>
8
+
toast('Hello there', {
9
+
description: 'General Kenobi!'
10
+
})}>Default</Button
11
+
>
12
+
13
+
<Button
14
+
variant="green"
15
+
onclick={() =>
16
+
toast.success('Success!', {
17
+
description: "You are strong and wise and I'm very proud of you!"
18
+
})}>Success</Button
19
+
>
20
+
<Button
21
+
variant="red"
22
+
onclick={() =>
23
+
toast.error('Error!', {
24
+
description: 'These are not the droids you are looking for.'
25
+
})}>Error</Button
26
+
>
27
+
<Button
28
+
variant="blue"
29
+
onclick={() =>
30
+
toast.info('Info!', {
31
+
description: 'I heard spinning is a good trick.'
32
+
})}>Info</Button
33
+
>
34
+
</div>
+35
apps/docs/src/routes/(main)/components/core/sonner/Sonner.md
+35
apps/docs/src/routes/(main)/components/core/sonner/Sonner.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Sonner
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
In your root layout:
14
+
15
+
```svelte
16
+
<script>
17
+
import { Toaster } from '@foxui/core';
18
+
</script>
19
+
20
+
<Toaster />
21
+
```
22
+
23
+
In your page:
24
+
25
+
```svelte
26
+
<script>
27
+
import { Button, toast } from '@foxui/core';
28
+
29
+
function handleClick() {
30
+
toast('Hello there', { description: 'General Kenobi!' });
31
+
}
32
+
</script>
33
+
34
+
<Button onclick={handleClick}>Default</Button>
35
+
```
+8
apps/docs/src/routes/(main)/components/core/switch/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/switch/+page.svelte
+25
apps/docs/src/routes/(main)/components/core/switch/Example.svelte
+25
apps/docs/src/routes/(main)/components/core/switch/Example.svelte
···
1
+
<script>
2
+
import { Switch, Label } from '@foxui/core';
3
+
4
+
let checked = $state(false);
5
+
let checked2 = $state(true);
6
+
</script>
7
+
8
+
<div class="not-prose flex flex-col gap-2">
9
+
<Switch bind:checked onCheckedChange={() => (checked2 = !checked2)} />
10
+
<Switch bind:checked={checked2} onCheckedChange={() => (checked = !checked)} />
11
+
<Switch disabled />
12
+
</div>
13
+
14
+
<h3>With Label</h3>
15
+
16
+
<div class="not-prose flex items-center space-x-2">
17
+
<Switch id="terms-switch" aria-labelledby="terms-switch-label" />
18
+
<Label
19
+
id="terms-switch-label"
20
+
for="terms-switch"
21
+
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
22
+
>
23
+
Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
24
+
</Label>
25
+
</div>
+21
apps/docs/src/routes/(main)/components/core/switch/Switch.md
+21
apps/docs/src/routes/(main)/components/core/switch/Switch.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Switch
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Switch } from '@foxui/core';
16
+
17
+
let checked = $state(false);
18
+
</script>
19
+
20
+
<Switch bind:checked />
21
+
```
+8
apps/docs/src/routes/(main)/components/core/tabs/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/tabs/+page.svelte
+14
apps/docs/src/routes/(main)/components/core/tabs/Example.svelte
+14
apps/docs/src/routes/(main)/components/core/tabs/Example.svelte
···
1
+
<script>
2
+
import { Tabs } from '@foxui/core';
3
+
4
+
let active = $state('Tab 1');
5
+
</script>
6
+
7
+
<Tabs
8
+
items={[
9
+
{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
10
+
{ name: 'Tab 2', onclick: () => (active = 'Tab 2') },
11
+
{ name: 'Tab 3', onclick: () => (active = 'Tab 3') }
12
+
]}
13
+
active={active}
14
+
/>
+28
apps/docs/src/routes/(main)/components/core/tabs/Tabs.md
+28
apps/docs/src/routes/(main)/components/core/tabs/Tabs.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Tabs
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Tabs } from '@foxui/core';
16
+
17
+
let active = $state('Tab 1');
18
+
</script>
19
+
20
+
<!-- alternatively you can also supply a href for each tab -->
21
+
<Tabs
22
+
items={[
23
+
{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
24
+
{ name: 'Tab 2', onclick: () => (active = 'Tab 2') }
25
+
]}
26
+
active={active}
27
+
/>
28
+
```
+8
apps/docs/src/routes/(main)/components/core/textarea/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/textarea/+page.svelte
+19
apps/docs/src/routes/(main)/components/core/textarea/Example.svelte
+19
apps/docs/src/routes/(main)/components/core/textarea/Example.svelte
···
1
+
<script>
2
+
import { Textarea } from '@foxui/core';
3
+
</script>
4
+
5
+
<h3>Primary</h3>
6
+
7
+
<div class="flex flex-col gap-2 md:flex-row">
8
+
<Textarea placeholder="Enter text here (small)" sizeVariant="sm" />
9
+
<Textarea placeholder="Enter text here (default)" />
10
+
<Textarea placeholder="Enter text here (large)" sizeVariant="lg" />
11
+
</div>
12
+
13
+
<h3>Secondary</h3>
14
+
15
+
<div class="flex flex-col gap-2 md:flex-row">
16
+
<Textarea placeholder="Enter text here (small)" variant="secondary" sizeVariant="sm" />
17
+
<Textarea placeholder="Enter text here (default)" variant="secondary" />
18
+
<Textarea placeholder="Enter text here (large)" variant="secondary" sizeVariant="lg" />
19
+
</div>
+21
apps/docs/src/routes/(main)/components/core/textarea/Textarea.md
+21
apps/docs/src/routes/(main)/components/core/textarea/Textarea.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Textarea
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Textarea } from '@foxui/core';
16
+
17
+
let value = $state('');
18
+
</script>
19
+
20
+
<Textarea placeholder="Enter text here" bind:value />
21
+
```
+8
apps/docs/src/routes/(main)/components/core/toggle-group/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/toggle-group/+page.svelte
+52
apps/docs/src/routes/(main)/components/core/toggle-group/Example.svelte
+52
apps/docs/src/routes/(main)/components/core/toggle-group/Example.svelte
···
1
+
<script>
2
+
import { ToggleGroup, ToggleGroupItem } from '@foxui/core';
3
+
</script>
4
+
5
+
<div class="flex items-center gap-2">
6
+
<ToggleGroup type="single" value="1">
7
+
<ToggleGroupItem value="1">1</ToggleGroupItem>
8
+
<ToggleGroupItem value="2">2</ToggleGroupItem>
9
+
<ToggleGroupItem value="3">3</ToggleGroupItem>
10
+
</ToggleGroup>
11
+
12
+
<ToggleGroup type="single">
13
+
<ToggleGroupItem value="1"
14
+
><svg
15
+
xmlns="http://www.w3.org/2000/svg"
16
+
viewBox="0 0 24 24"
17
+
fill="currentColor"
18
+
class="size-6"
19
+
>
20
+
<path
21
+
d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
22
+
/>
23
+
</svg>
24
+
</ToggleGroupItem>
25
+
<ToggleGroupItem value="2"
26
+
><svg
27
+
xmlns="http://www.w3.org/2000/svg"
28
+
viewBox="0 0 24 24"
29
+
fill="currentColor"
30
+
class="size-6"
31
+
>
32
+
<path
33
+
d="M12 1.5a.75.75 0 0 1 .75.75V7.5h-1.5V2.25A.75.75 0 0 1 12 1.5ZM11.25 7.5v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V7.5h3.75a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h3.75Z"
34
+
/>
35
+
</svg>
36
+
</ToggleGroupItem>
37
+
<ToggleGroupItem value="3"
38
+
><svg
39
+
xmlns="http://www.w3.org/2000/svg"
40
+
viewBox="0 0 24 24"
41
+
fill="currentColor"
42
+
class="size-6"
43
+
>
44
+
<path
45
+
fill-rule="evenodd"
46
+
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
47
+
clip-rule="evenodd"
48
+
/>
49
+
</svg>
50
+
</ToggleGroupItem>
51
+
</ToggleGroup>
52
+
</div>
+25
apps/docs/src/routes/(main)/components/core/toggle-group/ToggleGroup.md
+25
apps/docs/src/routes/(main)/components/core/toggle-group/ToggleGroup.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Toggle Group
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { ToggleGroup, ToggleGroupItem } from '@foxui/core';
16
+
17
+
let value = $state('1');
18
+
</script>
19
+
20
+
<ToggleGroup type="single" bind:value>
21
+
<ToggleGroupItem value="1">1</ToggleGroupItem>
22
+
<ToggleGroupItem value="2">2</ToggleGroupItem>
23
+
<ToggleGroupItem value="3">3</ToggleGroupItem>
24
+
</ToggleGroup>
25
+
```
+8
apps/docs/src/routes/(main)/components/core/toggle/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/toggle/+page.svelte
+63
apps/docs/src/routes/(main)/components/core/toggle/Example.svelte
+63
apps/docs/src/routes/(main)/components/core/toggle/Example.svelte
···
1
+
<script>
2
+
import { Toggle } from '@foxui/core';
3
+
</script>
4
+
5
+
<div class="flex items-center gap-2">
6
+
<Toggle>Toggle</Toggle>
7
+
8
+
<Toggle
9
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
10
+
<path
11
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
12
+
/>
13
+
<path
14
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
15
+
/>
16
+
<path
17
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
18
+
/>
19
+
</svg>
20
+
</Toggle>
21
+
<Toggle size="sm"
22
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
+
<path
24
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
25
+
/>
26
+
<path
27
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
28
+
/>
29
+
<path
30
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
31
+
/>
32
+
</svg>
33
+
</Toggle>
34
+
35
+
<Toggle size="lg"
36
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
37
+
<path
38
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
39
+
/>
40
+
<path
41
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
42
+
/>
43
+
<path
44
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
45
+
/>
46
+
</svg>
47
+
</Toggle>
48
+
49
+
<Toggle
50
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
51
+
<path
52
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
53
+
/>
54
+
<path
55
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
56
+
/>
57
+
<path
58
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
59
+
/>
60
+
</svg>
61
+
Toggle
62
+
</Toggle>
63
+
</div>
+21
apps/docs/src/routes/(main)/components/core/toggle/Toggle.md
+21
apps/docs/src/routes/(main)/components/core/toggle/Toggle.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Toggle
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Toggle } from '@foxui/core';
16
+
17
+
let pressed = $state(false);
18
+
</script>
19
+
20
+
<Toggle bind:pressed>Toggle</Toggle>
21
+
```
+8
apps/docs/src/routes/(main)/components/core/tooltip/+page.svelte
+8
apps/docs/src/routes/(main)/components/core/tooltip/+page.svelte
+15
apps/docs/src/routes/(main)/components/core/tooltip/Example.svelte
+15
apps/docs/src/routes/(main)/components/core/tooltip/Example.svelte
···
1
+
<script>
2
+
import { Tooltip, Button, toast } from '@foxui/core';
3
+
4
+
function handleClick() {
5
+
toast.error("Don't click, just hover!");
6
+
}
7
+
</script>
8
+
9
+
<div class="flex w-full flex-col items-start gap-2 py-12">
10
+
<Tooltip text="Hello there!" withContext>
11
+
{#snippet child({ props })}
12
+
<Button {...props} onclick={handleClick}>Hover me</Button>
13
+
{/snippet}
14
+
</Tooltip>
15
+
</div>
+27
apps/docs/src/routes/(main)/components/core/tooltip/Tooltip.md
+27
apps/docs/src/routes/(main)/components/core/tooltip/Tooltip.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Tooltip
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Tooltip, Button } from '@foxui/core';
16
+
17
+
function handleClick() {
18
+
console.log('clicked');
19
+
}
20
+
</script>
21
+
22
+
<Tooltip text="Hello there!" withContext>
23
+
{#snippet child({ props })}
24
+
<Button {...props} onclick={handleClick}>Hover me</Button>
25
+
{/snippet}
26
+
</Tooltip>
27
+
```