[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 api references
+1426
+36
apps/docs/src/lib/docs/core/alert/api.ts
+36
apps/docs/src/lib/docs/core/alert/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Alert',
6
+
description: 'A component for displaying important messages to the user.',
7
+
props: {
8
+
title: {
9
+
type: 'string',
10
+
description: 'The title text of the alert.'
11
+
},
12
+
type: {
13
+
type: { type: 'enum', definition: "'info' | 'warning' | 'success' | 'error'" },
14
+
description: 'The type of alert, which determines the icon and default color scheme.'
15
+
},
16
+
variant: {
17
+
type: 'string',
18
+
description: 'The visual variant of the alert.'
19
+
},
20
+
children: {
21
+
type: 'Snippet',
22
+
description: 'The content to display inside the alert.',
23
+
required: true
24
+
},
25
+
class: {
26
+
type: 'string',
27
+
description: 'Additional CSS classes to apply.'
28
+
},
29
+
ref: {
30
+
type: 'HTMLDivElement',
31
+
description: 'The underlying DOM element.',
32
+
bindable: true
33
+
}
34
+
}
35
+
}
36
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/alert/index.ts
+2
apps/docs/src/lib/docs/core/alert/index.ts
+86
apps/docs/src/lib/docs/core/avatar/api.ts
+86
apps/docs/src/lib/docs/core/avatar/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Avatar',
6
+
description: 'An image element with a fallback for representing a user.',
7
+
props: {
8
+
src: {
9
+
type: 'string',
10
+
description: 'The image source URL.'
11
+
},
12
+
alt: {
13
+
type: 'string',
14
+
description: 'Alt text for the avatar image.'
15
+
},
16
+
fallback: {
17
+
type: 'string',
18
+
description: 'Fallback text to display when the image is not available (e.g. initials).'
19
+
},
20
+
useThemeColor: {
21
+
type: 'boolean',
22
+
description: 'Whether to apply theme color styling to the image.',
23
+
default: 'false'
24
+
},
25
+
imageClass: {
26
+
type: 'string',
27
+
description: 'Additional CSS classes to apply to the image element.'
28
+
},
29
+
fallbackClass: {
30
+
type: 'string',
31
+
description: 'Additional CSS classes to apply to the fallback element.'
32
+
},
33
+
imageRef: {
34
+
type: 'HTMLImageElement',
35
+
description: 'Reference to the image DOM element.',
36
+
bindable: true
37
+
},
38
+
fallbackRef: {
39
+
type: 'HTMLElement',
40
+
description: 'Reference to the fallback DOM element.',
41
+
bindable: true
42
+
},
43
+
class: {
44
+
type: 'string',
45
+
description: 'Additional CSS classes to apply to the root element.'
46
+
},
47
+
ref: {
48
+
type: 'HTMLElement',
49
+
description: 'The underlying DOM element.',
50
+
bindable: true
51
+
}
52
+
}
53
+
},
54
+
{
55
+
title: 'AvatarGroup',
56
+
description: 'A group of overlapping avatars displayed in a row.',
57
+
props: {
58
+
users: {
59
+
type: { type: 'array', definition: '{ src?: string; alt?: string; fallback?: string }[]' },
60
+
description: 'The list of users to display avatars for.',
61
+
required: true
62
+
},
63
+
avatarClass: {
64
+
type: 'string',
65
+
description: 'Additional CSS classes to apply to each avatar.'
66
+
},
67
+
imageClass: {
68
+
type: 'string',
69
+
description: 'Additional CSS classes to apply to each avatar image.'
70
+
},
71
+
fallbackClass: {
72
+
type: 'string',
73
+
description: 'Additional CSS classes to apply to each avatar fallback.'
74
+
},
75
+
class: {
76
+
type: 'string',
77
+
description: 'Additional CSS classes to apply to the group container.'
78
+
},
79
+
ref: {
80
+
type: 'HTMLDivElement',
81
+
description: 'The underlying DOM element.',
82
+
bindable: true
83
+
}
84
+
}
85
+
}
86
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/avatar/index.ts
+2
apps/docs/src/lib/docs/core/avatar/index.ts
+34
apps/docs/src/lib/docs/core/badge/api.ts
+34
apps/docs/src/lib/docs/core/badge/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Badge',
6
+
description: 'A small label for status, categories, or metadata.',
7
+
props: {
8
+
variant: {
9
+
type: { type: 'enum', definition: "'primary' | 'primary_shift' | 'primary_shift_2' | 'secondary' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'" },
10
+
description: 'The visual variant of the badge.',
11
+
default: "'primary'"
12
+
},
13
+
size: {
14
+
type: { type: 'enum', definition: "'sm' | 'md' | 'lg'" },
15
+
description: 'The size of the badge.',
16
+
default: "'sm'"
17
+
},
18
+
children: {
19
+
type: 'Snippet',
20
+
description: 'The content to display inside the badge.',
21
+
required: true
22
+
},
23
+
class: {
24
+
type: 'string',
25
+
description: 'Additional CSS classes to apply.'
26
+
},
27
+
ref: {
28
+
type: 'HTMLSpanElement',
29
+
description: 'The underlying DOM element.',
30
+
bindable: true
31
+
}
32
+
}
33
+
}
34
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/badge/index.ts
+2
apps/docs/src/lib/docs/core/badge/index.ts
+23
apps/docs/src/lib/docs/core/box/api.ts
+23
apps/docs/src/lib/docs/core/box/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Box',
6
+
description: 'A styled container with default padding, rounded corners, and a subtle background.',
7
+
props: {
8
+
children: {
9
+
type: 'Snippet',
10
+
description: 'The content to display inside the box.',
11
+
required: true
12
+
},
13
+
class: {
14
+
type: 'string',
15
+
description: 'Additional CSS classes to apply.'
16
+
},
17
+
ref: {
18
+
type: 'HTMLDivElement',
19
+
description: 'The underlying DOM element.'
20
+
}
21
+
}
22
+
}
23
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/box/index.ts
+2
apps/docs/src/lib/docs/core/box/index.ts
+41
apps/docs/src/lib/docs/core/cards/api.ts
+41
apps/docs/src/lib/docs/core/cards/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ImageCard',
6
+
description: 'A card component with an image, title, and optional description. Can be a link or clickable.',
7
+
props: {
8
+
src: {
9
+
type: 'string',
10
+
description: 'The image source URL.',
11
+
required: true
12
+
},
13
+
alt: {
14
+
type: 'string',
15
+
description: 'Alt text for the card image.',
16
+
required: true
17
+
},
18
+
title: {
19
+
type: 'string',
20
+
description: 'The card title.',
21
+
required: true
22
+
},
23
+
description: {
24
+
type: 'string',
25
+
description: 'Optional description text below the title.'
26
+
},
27
+
href: {
28
+
type: 'string',
29
+
description: 'When provided, the card renders as a link.'
30
+
},
31
+
onclick: {
32
+
type: { type: 'function', definition: '() => void' },
33
+
description: 'Click event handler.'
34
+
},
35
+
class: {
36
+
type: 'string',
37
+
description: 'Additional CSS classes to apply.'
38
+
}
39
+
}
40
+
}
41
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/cards/index.ts
+2
apps/docs/src/lib/docs/core/cards/index.ts
+38
apps/docs/src/lib/docs/core/chat-bubble/api.ts
+38
apps/docs/src/lib/docs/core/chat-bubble/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ChatBubble',
6
+
description: 'A chat message bubble with left/right alignment for conversations.',
7
+
props: {
8
+
side: {
9
+
type: { type: 'enum', definition: "'left' | 'right'" },
10
+
description: 'Which side the bubble appears on. Left for received messages, right for sent.',
11
+
default: "'left'"
12
+
},
13
+
variant: {
14
+
type: 'string',
15
+
description: 'The visual variant. Defaults to "primary" for left and "secondary" for right.'
16
+
},
17
+
size: {
18
+
type: { type: 'enum', definition: "'sm' | 'md' | 'lg'" },
19
+
description: 'The size of the chat bubble.',
20
+
default: "'md'"
21
+
},
22
+
children: {
23
+
type: 'Snippet',
24
+
description: 'The message content.',
25
+
required: true
26
+
},
27
+
class: {
28
+
type: 'string',
29
+
description: 'Additional CSS classes to apply.'
30
+
},
31
+
ref: {
32
+
type: 'HTMLSpanElement',
33
+
description: 'The underlying DOM element.',
34
+
bindable: true
35
+
}
36
+
}
37
+
}
38
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/chat-bubble/index.ts
+2
apps/docs/src/lib/docs/core/chat-bubble/index.ts
+67
apps/docs/src/lib/docs/core/checkbox/api.ts
+67
apps/docs/src/lib/docs/core/checkbox/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Checkbox',
6
+
description: 'A control that allows the user to toggle between checked and not checked.',
7
+
props: {
8
+
checked: {
9
+
type: 'boolean',
10
+
description: 'The checked state of the checkbox.',
11
+
default: 'false',
12
+
bindable: true
13
+
},
14
+
indeterminate: {
15
+
type: 'boolean',
16
+
description: 'Whether the checkbox is in an indeterminate state.',
17
+
default: 'false',
18
+
bindable: true
19
+
},
20
+
variant: {
21
+
type: { type: 'enum', definition: "'primary' | 'secondary'" },
22
+
description: 'The visual variant of the checkbox.',
23
+
default: "'primary'"
24
+
},
25
+
sizeVariant: {
26
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
27
+
description: 'The size of the checkbox.',
28
+
default: "'default'"
29
+
},
30
+
disabled: {
31
+
type: 'boolean',
32
+
description: 'Whether the checkbox is disabled.',
33
+
default: 'false'
34
+
},
35
+
required: {
36
+
type: 'boolean',
37
+
description: 'Whether the checkbox is required.',
38
+
default: 'false'
39
+
},
40
+
name: {
41
+
type: 'string',
42
+
description: 'The name of the checkbox used in form submission.'
43
+
},
44
+
value: {
45
+
type: 'string',
46
+
description: 'The value of the checkbox used in form submission.'
47
+
},
48
+
onCheckedChange: {
49
+
type: { type: 'function', definition: '(checked: boolean) => void' },
50
+
description: 'A callback invoked when the checked state changes.'
51
+
},
52
+
onIndeterminateChange: {
53
+
type: { type: 'function', definition: '(indeterminate: boolean) => void' },
54
+
description: 'A callback invoked when the indeterminate state changes.'
55
+
},
56
+
class: {
57
+
type: 'string',
58
+
description: 'Additional CSS classes to apply.'
59
+
},
60
+
ref: {
61
+
type: 'HTMLElement',
62
+
description: 'The underlying DOM element. You can bind to this to get a reference to the element.',
63
+
bindable: true
64
+
}
65
+
}
66
+
}
67
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/checkbox/index.ts
+10
apps/docs/src/lib/docs/core/checkbox/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'checkbox',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/checkbox',
16
+
label: 'bits-ui checkbox',
17
+
package: 'bits-ui',
18
+
component: 'Checkbox'
19
+
}
20
+
]
11
21
};
+30
apps/docs/src/lib/docs/core/head/api.ts
+30
apps/docs/src/lib/docs/core/head/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Head',
6
+
description: 'Sets page metadata including title, description, Open Graph tags, and favicon.',
7
+
props: {
8
+
title: {
9
+
type: 'string',
10
+
description: 'The page title (sets <title> and og:title).'
11
+
},
12
+
description: {
13
+
type: 'string',
14
+
description: 'The page description (sets meta description and og:description).'
15
+
},
16
+
image: {
17
+
type: 'string',
18
+
description: 'The Open Graph image URL.'
19
+
},
20
+
url: {
21
+
type: 'string',
22
+
description: 'The canonical page URL.'
23
+
},
24
+
emojiFavicon: {
25
+
type: 'string',
26
+
description: 'An emoji to use as the page favicon (rendered as SVG).'
27
+
}
28
+
}
29
+
}
30
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/head/index.ts
+2
apps/docs/src/lib/docs/core/head/index.ts
+47
apps/docs/src/lib/docs/core/image/api.ts
+47
apps/docs/src/lib/docs/core/image/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Image',
6
+
description: 'An image component with optional theme color overlay and blur effects.',
7
+
props: {
8
+
src: {
9
+
type: 'string',
10
+
description: 'The image source URL.'
11
+
},
12
+
alt: {
13
+
type: 'string',
14
+
description: 'Alt text for the image.',
15
+
required: true
16
+
},
17
+
useThemeColor: {
18
+
type: 'boolean',
19
+
description: 'Whether to apply a theme color overlay to the image.',
20
+
default: 'false'
21
+
},
22
+
blur: {
23
+
type: 'boolean',
24
+
description: 'Whether to apply a blur loading effect.',
25
+
default: 'true'
26
+
},
27
+
showNormalOnHover: {
28
+
type: 'boolean',
29
+
description: 'When useThemeColor is true, shows the original image on hover.',
30
+
default: 'false'
31
+
},
32
+
containerClasses: {
33
+
type: 'string',
34
+
description: 'Additional CSS classes for the image container.'
35
+
},
36
+
class: {
37
+
type: 'string',
38
+
description: 'Additional CSS classes for the image element.'
39
+
},
40
+
ref: {
41
+
type: 'HTMLImageElement',
42
+
description: 'The underlying image DOM element.',
43
+
bindable: true
44
+
}
45
+
}
46
+
}
47
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/image/index.ts
+2
apps/docs/src/lib/docs/core/image/index.ts
+38
apps/docs/src/lib/docs/core/input/api.ts
+38
apps/docs/src/lib/docs/core/input/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Input',
6
+
description: 'A styled text input field.',
7
+
props: {
8
+
value: {
9
+
type: 'string',
10
+
description: 'The current value of the input.',
11
+
bindable: true
12
+
},
13
+
type: {
14
+
type: 'string',
15
+
description: 'The HTML input type (text, email, password, number, etc.). Excludes "file".'
16
+
},
17
+
variant: {
18
+
type: { type: 'enum', definition: "'primary' | 'secondary'" },
19
+
description: 'The visual variant of the input.',
20
+
default: "'primary'"
21
+
},
22
+
sizeVariant: {
23
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
24
+
description: 'The size of the input.',
25
+
default: "'default'"
26
+
},
27
+
class: {
28
+
type: 'string',
29
+
description: 'Additional CSS classes to apply.'
30
+
},
31
+
ref: {
32
+
type: 'HTMLInputElement',
33
+
description: 'The underlying DOM element.',
34
+
bindable: true
35
+
}
36
+
}
37
+
}
38
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/input/index.ts
+2
apps/docs/src/lib/docs/core/input/index.ts
+51
apps/docs/src/lib/docs/core/modal/api.ts
+51
apps/docs/src/lib/docs/core/modal/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Modal',
6
+
description: 'A dialog overlay that requires user interaction. Built on top of the bits-ui Dialog primitive.',
7
+
props: {
8
+
open: {
9
+
type: 'boolean',
10
+
description: 'Whether the modal is open.',
11
+
default: 'false',
12
+
bindable: true
13
+
},
14
+
children: {
15
+
type: 'Snippet',
16
+
description: 'The content to display inside the modal.',
17
+
required: true
18
+
},
19
+
closeButton: {
20
+
type: 'boolean',
21
+
description: 'Whether to show the close button in the top-right corner.',
22
+
default: 'true'
23
+
},
24
+
interactOutsideBehavior: {
25
+
type: { type: 'enum', definition: "'close' | 'ignore'" },
26
+
description: 'How the modal responds to clicks outside its content.',
27
+
default: "'close'"
28
+
},
29
+
onOpenAutoFocus: {
30
+
type: { type: 'function', definition: '(event: Event) => void' },
31
+
description: 'Callback when focus is moved into the modal on open. Call event.preventDefault() to prevent default focus behavior.'
32
+
},
33
+
contentProps: {
34
+
type: 'Dialog.ContentProps',
35
+
description: 'Additional props to pass to the underlying Dialog.Content component.'
36
+
},
37
+
onOpenChange: {
38
+
type: { type: 'function', definition: '(open: boolean) => void' },
39
+
description: 'A callback invoked when the open state changes.'
40
+
},
41
+
onOpenChangeComplete: {
42
+
type: { type: 'function', definition: '(open: boolean) => void' },
43
+
description: 'A callback invoked after the open/close transition completes.'
44
+
},
45
+
class: {
46
+
type: 'string',
47
+
description: 'Additional CSS classes to apply to the modal content.'
48
+
}
49
+
}
50
+
}
51
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/modal/index.ts
+10
apps/docs/src/lib/docs/core/modal/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'modal',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/dialog',
16
+
label: 'bits-ui dialog',
17
+
package: 'bits-ui',
18
+
component: 'Dialog'
19
+
}
20
+
]
11
21
};
+64
apps/docs/src/lib/docs/core/number-input/api.ts
+64
apps/docs/src/lib/docs/core/number-input/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'NumberInput',
6
+
description: 'A numeric input with animated value transitions. Uses number-flow for smooth animations.',
7
+
props: {
8
+
value: {
9
+
type: 'number',
10
+
description: 'The current numeric value.',
11
+
default: '50',
12
+
bindable: true
13
+
},
14
+
min: {
15
+
type: 'number',
16
+
description: 'The minimum allowed value.',
17
+
default: '0'
18
+
},
19
+
max: {
20
+
type: 'number',
21
+
description: 'The maximum allowed value.',
22
+
default: '999'
23
+
},
24
+
step: {
25
+
type: 'number',
26
+
description: 'The step increment for the input.',
27
+
default: '1'
28
+
},
29
+
defaultValue: {
30
+
type: 'number',
31
+
description: 'The initial default value.',
32
+
default: '0'
33
+
},
34
+
variant: {
35
+
type: { type: 'enum', definition: "'primary' | 'secondary'" },
36
+
description: 'The visual variant.',
37
+
default: "'primary'"
38
+
},
39
+
size: {
40
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
41
+
description: 'The size of the input.',
42
+
default: "'default'"
43
+
},
44
+
tabindex: {
45
+
type: 'number',
46
+
description: 'The tabindex of the input.'
47
+
},
48
+
class: {
49
+
type: 'string',
50
+
description: 'Additional CSS classes to apply.'
51
+
},
52
+
ref: {
53
+
type: 'HTMLDivElement',
54
+
description: 'The underlying container DOM element.',
55
+
bindable: true
56
+
},
57
+
inputRef: {
58
+
type: 'HTMLInputElement',
59
+
description: 'Reference to the inner input element.',
60
+
bindable: true
61
+
}
62
+
}
63
+
}
64
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/number-input/index.ts
+2
apps/docs/src/lib/docs/core/number-input/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'number-input',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
11
13
sources: [
12
14
{
13
15
href: 'https://number-flow.barvian.me/',
+67
apps/docs/src/lib/docs/core/popover/api.ts
+67
apps/docs/src/lib/docs/core/popover/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Popover',
6
+
description: 'A floating panel anchored to a trigger button. Built on top of the bits-ui Popover primitive.',
7
+
props: {
8
+
open: {
9
+
type: 'boolean',
10
+
description: 'Whether the popover is open.',
11
+
default: 'false',
12
+
bindable: true
13
+
},
14
+
onOpenChange: {
15
+
type: { type: 'function', definition: '(open: boolean) => void' },
16
+
description: 'A callback invoked when the open state changes.'
17
+
},
18
+
children: {
19
+
type: 'Snippet',
20
+
description: 'The content to display inside the popover.',
21
+
required: true
22
+
},
23
+
triggerText: {
24
+
type: 'string',
25
+
description: 'Text label for the trigger button.'
26
+
},
27
+
triggerVariant: {
28
+
type: { type: 'enum', definition: "'primary' | 'secondary' | 'link' | 'ghost'" },
29
+
description: 'The visual variant of the trigger button.',
30
+
default: "'primary'"
31
+
},
32
+
triggerSize: {
33
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg' | 'icon' | 'iconSm' | 'iconLg'" },
34
+
description: 'The size of the trigger button.',
35
+
default: "'default'"
36
+
},
37
+
triggerClasses: {
38
+
type: 'string',
39
+
description: 'Additional CSS classes to apply to the trigger button.',
40
+
default: "''"
41
+
},
42
+
triggerRef: {
43
+
type: 'HTMLButtonElement',
44
+
description: 'Reference to the trigger button element.',
45
+
bindable: true
46
+
},
47
+
side: {
48
+
type: { type: 'enum', definition: "'top' | 'bottom' | 'left' | 'right'" },
49
+
description: 'The preferred side of the trigger to render the popover.',
50
+
default: "'top'"
51
+
},
52
+
sideOffset: {
53
+
type: 'number',
54
+
description: 'The distance in pixels from the trigger.',
55
+
default: '10'
56
+
},
57
+
child: {
58
+
type: 'Snippet',
59
+
description: 'A snippet for custom trigger rendering. Use this instead of triggerText for full control over the trigger.'
60
+
},
61
+
class: {
62
+
type: 'string',
63
+
description: 'Additional CSS classes to apply to the popover content.'
64
+
}
65
+
}
66
+
}
67
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/popover/index.ts
+10
apps/docs/src/lib/docs/core/popover/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'popover',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/popover',
16
+
label: 'bits-ui popover',
17
+
package: 'bits-ui',
18
+
component: 'Popover'
19
+
}
20
+
]
11
21
};
+29
apps/docs/src/lib/docs/core/prose/api.ts
+29
apps/docs/src/lib/docs/core/prose/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Prose',
6
+
description: 'A wrapper that applies Tailwind Typography styles to its content for rendering rich text.',
7
+
props: {
8
+
size: {
9
+
type: { type: 'enum', definition: "'default' | 'md' | 'lg' | 'xl' | '2xl'" },
10
+
description: 'The typography size scale.',
11
+
default: "'default'"
12
+
},
13
+
children: {
14
+
type: 'Snippet',
15
+
description: 'The content to apply typography styles to.',
16
+
required: true
17
+
},
18
+
class: {
19
+
type: 'string',
20
+
description: 'Additional CSS classes to apply.'
21
+
},
22
+
ref: {
23
+
type: 'HTMLDivElement',
24
+
description: 'The underlying DOM element.',
25
+
bindable: true
26
+
}
27
+
}
28
+
}
29
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/prose/index.ts
+2
apps/docs/src/lib/docs/core/prose/index.ts
+29
apps/docs/src/lib/docs/core/scroll-area/api.ts
+29
apps/docs/src/lib/docs/core/scroll-area/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ScrollArea',
6
+
description: 'A container with custom-styled scrollbars.',
7
+
props: {
8
+
orientation: {
9
+
type: { type: 'enum', definition: "'vertical' | 'horizontal' | 'both'" },
10
+
description: 'The scrollable direction(s).',
11
+
default: "'vertical'"
12
+
},
13
+
children: {
14
+
type: 'Snippet',
15
+
description: 'The scrollable content.',
16
+
required: true
17
+
},
18
+
class: {
19
+
type: 'string',
20
+
description: 'Additional CSS classes to apply.'
21
+
},
22
+
ref: {
23
+
type: 'HTMLDivElement',
24
+
description: 'The underlying DOM element.',
25
+
bindable: true
26
+
}
27
+
}
28
+
}
29
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/scroll-area/index.ts
+2
apps/docs/src/lib/docs/core/scroll-area/index.ts
+71
apps/docs/src/lib/docs/core/select/api.ts
+71
apps/docs/src/lib/docs/core/select/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Select',
6
+
description: 'A dropdown select menu. Built on top of the bits-ui Select primitive.',
7
+
props: {
8
+
value: {
9
+
type: { type: 'union', definition: 'string | string[]' },
10
+
description: 'The currently selected value.',
11
+
bindable: true
12
+
},
13
+
items: {
14
+
type: { type: 'array', definition: '{ value: string; label: string; disabled?: boolean }[]' },
15
+
description: 'The list of items to display in the select dropdown.',
16
+
required: true
17
+
},
18
+
placeholder: {
19
+
type: 'string',
20
+
description: 'Placeholder text shown when no value is selected.'
21
+
},
22
+
type: {
23
+
type: { type: 'enum', definition: "'single' | 'multiple'" },
24
+
description: 'Whether the select allows single or multiple selections.',
25
+
default: "'single'"
26
+
},
27
+
open: {
28
+
type: 'boolean',
29
+
description: 'Whether the select dropdown is open.',
30
+
default: 'false',
31
+
bindable: true
32
+
},
33
+
onValueChange: {
34
+
type: { type: 'function', definition: '(value: string) => void' },
35
+
description: 'A callback invoked when the selected value changes.'
36
+
},
37
+
onOpenChange: {
38
+
type: { type: 'function', definition: '(open: boolean) => void' },
39
+
description: 'A callback invoked when the dropdown open state changes.'
40
+
},
41
+
disabled: {
42
+
type: 'boolean',
43
+
description: 'Whether the select is disabled.',
44
+
default: 'false'
45
+
},
46
+
name: {
47
+
type: 'string',
48
+
description: 'The name of the select used in form submission.'
49
+
},
50
+
required: {
51
+
type: 'boolean',
52
+
description: 'Whether the select is required.',
53
+
default: 'false'
54
+
},
55
+
loop: {
56
+
type: 'boolean',
57
+
description: 'Whether keyboard navigation loops from last item to first and vice versa.',
58
+
default: 'false'
59
+
},
60
+
allowDeselect: {
61
+
type: 'boolean',
62
+
description: 'Whether the user can deselect the selected item.',
63
+
default: 'false'
64
+
},
65
+
contentProps: {
66
+
type: 'Select.ContentProps',
67
+
description: 'Additional props to pass to the underlying Select.Content component (positioning, collision, etc.).'
68
+
}
69
+
}
70
+
}
71
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/select/index.ts
+10
apps/docs/src/lib/docs/core/select/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'select',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/select',
16
+
label: 'bits-ui select',
17
+
package: 'bits-ui',
18
+
component: 'Select'
19
+
}
20
+
]
11
21
};
+75
apps/docs/src/lib/docs/core/slider/api.ts
+75
apps/docs/src/lib/docs/core/slider/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Slider',
6
+
description: 'A control for selecting a numeric value within a range. Built on top of the bits-ui Slider primitive.',
7
+
props: {
8
+
value: {
9
+
type: 'number[]',
10
+
description: 'The current value of the slider. Array with one element for single, multiple for range sliders.',
11
+
bindable: true
12
+
},
13
+
type: {
14
+
type: { type: 'enum', definition: "'single' | 'multiple'" },
15
+
description: 'Whether the slider has a single thumb or multiple thumbs.',
16
+
default: "'single'"
17
+
},
18
+
min: {
19
+
type: 'number',
20
+
description: 'The minimum value of the slider.',
21
+
default: '0'
22
+
},
23
+
max: {
24
+
type: 'number',
25
+
description: 'The maximum value of the slider.',
26
+
default: '100'
27
+
},
28
+
step: {
29
+
type: { type: 'union', definition: 'number | number[]' },
30
+
description: 'The step increment. Can be a single number or an array of specific step values.'
31
+
},
32
+
orientation: {
33
+
type: { type: 'enum', definition: "'horizontal' | 'vertical'" },
34
+
description: 'The orientation of the slider.',
35
+
default: "'horizontal'"
36
+
},
37
+
disabled: {
38
+
type: 'boolean',
39
+
description: 'Whether the slider is disabled.',
40
+
default: 'false'
41
+
},
42
+
onValueChange: {
43
+
type: { type: 'function', definition: '(value: number[]) => void' },
44
+
description: 'A callback invoked when the slider value changes during interaction.'
45
+
},
46
+
onValueCommit: {
47
+
type: { type: 'function', definition: '(value: number[]) => void' },
48
+
description: 'A callback invoked when the user finishes interacting with the slider (on pointerup/keyup).'
49
+
},
50
+
dir: {
51
+
type: { type: 'enum', definition: "'ltr' | 'rtl'" },
52
+
description: 'The reading direction of the slider.',
53
+
default: "'ltr'"
54
+
},
55
+
autoSort: {
56
+
type: 'boolean',
57
+
description: 'Whether to automatically sort the values when multiple thumbs cross over.',
58
+
default: 'true'
59
+
},
60
+
tabindex: {
61
+
type: 'number',
62
+
description: 'The tabindex of the slider thumbs.'
63
+
},
64
+
class: {
65
+
type: 'string',
66
+
description: 'Additional CSS classes to apply.'
67
+
},
68
+
ref: {
69
+
type: 'HTMLElement',
70
+
description: 'The underlying DOM element.',
71
+
bindable: true
72
+
}
73
+
}
74
+
}
75
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/slider/index.ts
+10
apps/docs/src/lib/docs/core/slider/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'slider',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/slider',
16
+
label: 'bits-ui slider',
17
+
package: 'bits-ui',
18
+
component: 'Slider'
19
+
}
20
+
]
11
21
};
+15
apps/docs/src/lib/docs/core/sonner/api.ts
+15
apps/docs/src/lib/docs/core/sonner/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Toaster',
6
+
description: 'A toast notification container. Place once in your layout and use the toast() function to show notifications. Built on svelte-sonner.',
7
+
props: {
8
+
colors: {
9
+
type: { type: 'object', definition: "{ default?: Colors; success?: Colors; error?: Colors; info?: Colors }" },
10
+
description: "Color mapping for toast types. Colors can be: 'blue' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'orange' | 'teal' | 'emerald' | 'lime' | 'cyan' | 'sky' | 'rose' | 'amber' | 'violet' | 'fuchsia' | 'base' | 'accent'.",
11
+
default: "{ default: 'accent', success: 'green', error: 'red', info: 'blue' }"
12
+
}
13
+
}
14
+
}
15
+
] satisfies APISchema[];
+8
apps/docs/src/lib/docs/core/sonner/index.ts
+8
apps/docs/src/lib/docs/core/sonner/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'sonner',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://sonner.emilkowal.ski/',
16
+
label: 'sonner'
17
+
}
18
+
]
11
19
};
+47
apps/docs/src/lib/docs/core/switch/api.ts
+47
apps/docs/src/lib/docs/core/switch/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Switch',
6
+
description: 'A toggle control that switches between on and off states. Built on top of the bits-ui Switch primitive.',
7
+
props: {
8
+
checked: {
9
+
type: 'boolean',
10
+
description: 'Whether the switch is checked (on).',
11
+
default: 'false',
12
+
bindable: true
13
+
},
14
+
onCheckedChange: {
15
+
type: { type: 'function', definition: '(checked: boolean) => void' },
16
+
description: 'A callback invoked when the checked state changes.'
17
+
},
18
+
disabled: {
19
+
type: 'boolean',
20
+
description: 'Whether the switch is disabled.',
21
+
default: 'false'
22
+
},
23
+
name: {
24
+
type: 'string',
25
+
description: 'The name of the switch used in form submission.'
26
+
},
27
+
required: {
28
+
type: 'boolean',
29
+
description: 'Whether the switch is required.',
30
+
default: 'false'
31
+
},
32
+
value: {
33
+
type: 'string',
34
+
description: 'The value of the switch used in form submission.'
35
+
},
36
+
class: {
37
+
type: 'string',
38
+
description: 'Additional CSS classes to apply.'
39
+
},
40
+
ref: {
41
+
type: 'HTMLElement',
42
+
description: 'The underlying DOM element.',
43
+
bindable: true
44
+
}
45
+
}
46
+
}
47
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/switch/index.ts
+10
apps/docs/src/lib/docs/core/switch/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'switch',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/switch',
16
+
label: 'bits-ui switch',
17
+
package: 'bits-ui',
18
+
component: 'Switch'
19
+
}
20
+
]
11
21
};
+24
apps/docs/src/lib/docs/core/tabs/api.ts
+24
apps/docs/src/lib/docs/core/tabs/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Tabs',
6
+
description: 'A horizontal tab navigation component.',
7
+
props: {
8
+
items: {
9
+
type: { type: 'array', definition: '{ name: string; href?: string; onclick?: () => void }[]' },
10
+
description: 'The list of tab items. Each item can be a link (href) or a button (onclick).',
11
+
required: true
12
+
},
13
+
active: {
14
+
type: 'string',
15
+
description: 'The name of the currently active tab.',
16
+
required: true
17
+
},
18
+
class: {
19
+
type: 'string',
20
+
description: 'Additional CSS classes to apply.'
21
+
}
22
+
}
23
+
}
24
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/tabs/index.ts
+2
apps/docs/src/lib/docs/core/tabs/index.ts
+34
apps/docs/src/lib/docs/core/textarea/api.ts
+34
apps/docs/src/lib/docs/core/textarea/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Textarea',
6
+
description: 'A styled multi-line text input.',
7
+
props: {
8
+
value: {
9
+
type: 'string',
10
+
description: 'The current value of the textarea.',
11
+
bindable: true
12
+
},
13
+
variant: {
14
+
type: { type: 'enum', definition: "'primary' | 'secondary'" },
15
+
description: 'The visual variant.',
16
+
default: "'primary'"
17
+
},
18
+
sizeVariant: {
19
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
20
+
description: 'The size of the textarea.',
21
+
default: "'default'"
22
+
},
23
+
class: {
24
+
type: 'string',
25
+
description: 'Additional CSS classes to apply.'
26
+
},
27
+
ref: {
28
+
type: 'HTMLTextAreaElement',
29
+
description: 'The underlying DOM element.',
30
+
bindable: true
31
+
}
32
+
}
33
+
}
34
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/textarea/index.ts
+2
apps/docs/src/lib/docs/core/textarea/index.ts
+24
apps/docs/src/lib/docs/core/theme-toggle/api.ts
+24
apps/docs/src/lib/docs/core/theme-toggle/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ThemeToggle',
6
+
description: 'A button that toggles between light, dark, and system theme modes. Uses mode-watcher under the hood.',
7
+
props: {
8
+
defaultMode: {
9
+
type: { type: 'enum', definition: "'light' | 'dark' | 'system'" },
10
+
description: 'The initial theme mode.',
11
+
default: "'system'"
12
+
},
13
+
class: {
14
+
type: 'string',
15
+
description: 'Additional CSS classes to apply.'
16
+
},
17
+
ref: {
18
+
type: 'HTMLElement',
19
+
description: 'The underlying DOM element.',
20
+
bindable: true
21
+
}
22
+
}
23
+
}
24
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/core/theme-toggle/index.ts
+2
apps/docs/src/lib/docs/core/theme-toggle/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'theme-toggle',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
11
13
sources: [
12
14
{
13
15
href: 'https://github.com/svecosystem/mode-watcher',
+97
apps/docs/src/lib/docs/core/toggle-group/api.ts
+97
apps/docs/src/lib/docs/core/toggle-group/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ToggleGroup',
6
+
description: 'A group of toggle buttons where one or multiple can be pressed. Built on top of the bits-ui ToggleGroup primitive.',
7
+
props: {
8
+
type: {
9
+
type: { type: 'enum', definition: "'single' | 'multiple'" },
10
+
description: "Whether a single or multiple items can be pressed at a time.",
11
+
required: true
12
+
},
13
+
value: {
14
+
type: { type: 'union', definition: 'string | string[]' },
15
+
description: 'The currently pressed value(s). A string when type is "single", an array when "multiple".',
16
+
bindable: true
17
+
},
18
+
onValueChange: {
19
+
type: { type: 'function', definition: '(value: string | string[]) => void' },
20
+
description: 'A callback invoked when the pressed value changes.'
21
+
},
22
+
variant: {
23
+
type: { type: 'enum', definition: "'default'" },
24
+
description: 'The visual variant of the toggle group items.',
25
+
default: "'default'"
26
+
},
27
+
size: {
28
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
29
+
description: 'The size of the toggle group items.',
30
+
default: "'default'"
31
+
},
32
+
disabled: {
33
+
type: 'boolean',
34
+
description: 'Whether the entire toggle group is disabled.',
35
+
default: 'false'
36
+
},
37
+
loop: {
38
+
type: 'boolean',
39
+
description: 'Whether keyboard navigation loops from last item to first and vice versa.',
40
+
default: 'true'
41
+
},
42
+
orientation: {
43
+
type: { type: 'enum', definition: "'horizontal' | 'vertical'" },
44
+
description: 'The orientation of the toggle group for keyboard navigation.',
45
+
default: "'horizontal'"
46
+
},
47
+
rovingFocus: {
48
+
type: 'boolean',
49
+
description: 'Whether the toggle group uses roving focus management.',
50
+
default: 'true'
51
+
},
52
+
class: {
53
+
type: 'string',
54
+
description: 'Additional CSS classes to apply.'
55
+
},
56
+
ref: {
57
+
type: 'HTMLElement',
58
+
description: 'The underlying DOM element.',
59
+
bindable: true
60
+
}
61
+
}
62
+
},
63
+
{
64
+
title: 'ToggleGroupItem',
65
+
description: 'A single item within a toggle group.',
66
+
props: {
67
+
value: {
68
+
type: 'string',
69
+
description: 'The value of this toggle item.',
70
+
required: true,
71
+
bindable: true
72
+
},
73
+
variant: {
74
+
type: { type: 'enum', definition: "'default'" },
75
+
description: 'Override the visual variant for this specific item. Falls back to the parent ToggleGroup variant.'
76
+
},
77
+
size: {
78
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
79
+
description: 'Override the size for this specific item. Falls back to the parent ToggleGroup size.'
80
+
},
81
+
disabled: {
82
+
type: 'boolean',
83
+
description: 'Whether this item is disabled.',
84
+
default: 'false'
85
+
},
86
+
class: {
87
+
type: 'string',
88
+
description: 'Additional CSS classes to apply.'
89
+
},
90
+
ref: {
91
+
type: 'HTMLElement',
92
+
description: 'The underlying DOM element.',
93
+
bindable: true
94
+
}
95
+
}
96
+
}
97
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/toggle-group/index.ts
+10
apps/docs/src/lib/docs/core/toggle-group/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'toggle-group',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/toggle-group',
16
+
label: 'bits-ui toggle-group',
17
+
package: 'bits-ui',
18
+
component: 'ToggleGroup'
19
+
}
20
+
]
11
21
};
+44
apps/docs/src/lib/docs/core/toggle/api.ts
+44
apps/docs/src/lib/docs/core/toggle/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Toggle',
6
+
description: 'A two-state button that can be toggled on or off. Built on top of the bits-ui Toggle primitive.',
7
+
props: {
8
+
pressed: {
9
+
type: 'boolean',
10
+
description: 'Whether the toggle is pressed.',
11
+
default: 'false',
12
+
bindable: true
13
+
},
14
+
onPressedChange: {
15
+
type: { type: 'function', definition: '(pressed: boolean) => void' },
16
+
description: 'A callback invoked when the pressed state changes.'
17
+
},
18
+
variant: {
19
+
type: { type: 'enum', definition: "'default'" },
20
+
description: 'The visual variant of the toggle.',
21
+
default: "'default'"
22
+
},
23
+
size: {
24
+
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
25
+
description: 'The size of the toggle.',
26
+
default: "'default'"
27
+
},
28
+
disabled: {
29
+
type: 'boolean',
30
+
description: 'Whether the toggle is disabled.',
31
+
default: 'false'
32
+
},
33
+
class: {
34
+
type: 'string',
35
+
description: 'Additional CSS classes to apply.'
36
+
},
37
+
ref: {
38
+
type: 'HTMLElement',
39
+
description: 'The underlying DOM element.',
40
+
bindable: true
41
+
}
42
+
}
43
+
}
44
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/toggle/index.ts
+10
apps/docs/src/lib/docs/core/toggle/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'toggle',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/toggle',
16
+
label: 'bits-ui toggle',
17
+
package: 'bits-ui',
18
+
component: 'Toggle'
19
+
}
20
+
]
11
21
};
+74
apps/docs/src/lib/docs/core/tooltip/api.ts
+74
apps/docs/src/lib/docs/core/tooltip/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Tooltip',
6
+
description: 'A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it. Built on top of the bits-ui Tooltip primitive.',
7
+
props: {
8
+
open: {
9
+
type: 'boolean',
10
+
description: 'Whether the tooltip is open.',
11
+
default: 'false',
12
+
bindable: true
13
+
},
14
+
text: {
15
+
type: 'string',
16
+
description: 'Simple text content for the tooltip. Use this for plain text tooltips.'
17
+
},
18
+
content: {
19
+
type: 'Snippet',
20
+
description: 'A snippet for custom tooltip content. Use this instead of text for rich content.'
21
+
},
22
+
child: {
23
+
type: 'Snippet',
24
+
description: 'A snippet for custom trigger rendering. The trigger element that the tooltip is anchored to.'
25
+
},
26
+
withContext: {
27
+
type: 'boolean',
28
+
description: 'Whether to use a context menu-style tooltip (right-click triggered).',
29
+
default: 'false'
30
+
},
31
+
triggerProps: {
32
+
type: 'Tooltip.TriggerProps',
33
+
description: 'Additional props to pass to the underlying Tooltip.Trigger component.'
34
+
},
35
+
contentProps: {
36
+
type: 'Tooltip.ContentProps',
37
+
description: 'Additional props to pass to the underlying Tooltip.Content component (positioning, collision, etc.).'
38
+
},
39
+
onOpenChange: {
40
+
type: { type: 'function', definition: '(open: boolean) => void' },
41
+
description: 'A callback invoked when the open state changes.'
42
+
},
43
+
onOpenChangeComplete: {
44
+
type: { type: 'function', definition: '(open: boolean) => void' },
45
+
description: 'A callback invoked after the open/close transition completes.'
46
+
},
47
+
disabled: {
48
+
type: 'boolean',
49
+
description: 'Whether the tooltip is disabled.',
50
+
default: 'false'
51
+
},
52
+
delayDuration: {
53
+
type: 'number',
54
+
description: 'The delay in milliseconds before the tooltip opens on hover.',
55
+
default: '700'
56
+
},
57
+
disableHoverableContent: {
58
+
type: 'boolean',
59
+
description: 'Whether hovering over the tooltip content keeps it open.',
60
+
default: 'false'
61
+
},
62
+
disableCloseOnTriggerClick: {
63
+
type: 'boolean',
64
+
description: 'Whether clicking the trigger closes the tooltip.',
65
+
default: 'false'
66
+
},
67
+
ignoreNonKeyboardFocus: {
68
+
type: 'boolean',
69
+
description: 'Whether to ignore non-keyboard focus events (e.g. mouse focus).',
70
+
default: 'false'
71
+
}
72
+
}
73
+
}
74
+
] satisfies APISchema[];
+10
apps/docs/src/lib/docs/core/tooltip/index.ts
+10
apps/docs/src/lib/docs/core/tooltip/index.ts
···
1
1
import Docs from './Documentation.md';
2
2
import Example from './Example.svelte';
3
3
import Card from './Card.svelte';
4
+
import api from './api';
4
5
5
6
export default {
6
7
slug: 'tooltip',
···
8
9
docs: Docs,
9
10
example: Example,
10
11
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://bits-ui.com/docs/components/tooltip',
16
+
label: 'bits-ui tooltip',
17
+
package: 'bits-ui',
18
+
component: 'Tooltip'
19
+
}
20
+
]
11
21
};