[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
more api, small fix
+1165
-5
+33
apps/docs/src/lib/docs/colors/color-gradient-picker/api.ts
+33
apps/docs/src/lib/docs/colors/color-gradient-picker/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ColorGradientPicker',
6
+
description: 'A gradient editor that lets users add, remove, and reposition color stops.',
7
+
props: {
8
+
colors: {
9
+
type: { type: 'array', definition: '{ rgb: { r: number; g: number; b: number }; position: number }[]' },
10
+
description: 'The array of color stops defining the gradient.',
11
+
bindable: true
12
+
},
13
+
defaultNewColor: {
14
+
type: { type: 'object', definition: '{ r: number; g: number; b: number }' },
15
+
description: 'The default RGB color for newly added stops.',
16
+
default: '{ r: 0, g: 0, b: 0 }'
17
+
},
18
+
size: {
19
+
type: { type: 'enum', definition: "'default' | 'sm'" },
20
+
description: 'The size of the gradient picker.',
21
+
default: "'default'"
22
+
},
23
+
onchange: {
24
+
type: { type: 'function', definition: '(colors: ColorStop[]) => void' },
25
+
description: 'Callback invoked when the gradient colors change.'
26
+
},
27
+
class: {
28
+
type: 'string',
29
+
description: 'Additional CSS classes to apply.'
30
+
}
31
+
}
32
+
}
33
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/colors/color-gradient-picker/index.ts
+2
apps/docs/src/lib/docs/colors/color-gradient-picker/index.ts
+84
apps/docs/src/lib/docs/colors/color-picker/api.ts
+84
apps/docs/src/lib/docs/colors/color-picker/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ColorPicker',
6
+
description: 'A full color picker with a saturation/value area, hue slider, and optional quick-select swatches. Supports RGB, OKLab, and OKHsv color spaces.',
7
+
props: {
8
+
rgb: {
9
+
type: { type: 'object', definition: '{ r: number; g: number; b: number }' },
10
+
description: 'The current color in RGB format (0-255).',
11
+
bindable: true
12
+
},
13
+
oklab: {
14
+
type: { type: 'object', definition: '{ l: number; a: number; b: number }' },
15
+
description: 'The current color in OKLab format.',
16
+
bindable: true
17
+
},
18
+
okhsv: {
19
+
type: { type: 'object', definition: '{ h: number; s: number; v: number }' },
20
+
description: 'The current color in OKHsv format.',
21
+
bindable: true
22
+
},
23
+
onchange: {
24
+
type: { type: 'function', definition: '(color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void' },
25
+
description: 'Callback invoked when the color changes. Provides the color in all supported formats.'
26
+
},
27
+
quickSelects: {
28
+
type: { type: 'array', definition: '{ label: string; rgb?: RGB; oklab?: OKlab; okhsv?: OKhsv }[]' },
29
+
description: 'Quick-select color swatches displayed below the picker.',
30
+
default: '[]',
31
+
bindable: true
32
+
},
33
+
class: {
34
+
type: 'string',
35
+
description: 'Additional CSS classes to apply.'
36
+
}
37
+
}
38
+
},
39
+
{
40
+
title: 'PopoverColorPicker',
41
+
description: 'A color picker wrapped in a popover, triggered by a color swatch button.',
42
+
props: {
43
+
rgb: {
44
+
type: { type: 'object', definition: '{ r: number; g: number; b: number }' },
45
+
description: 'The current color in RGB format (0-255).',
46
+
bindable: true
47
+
},
48
+
oklab: {
49
+
type: { type: 'object', definition: '{ l: number; a: number; b: number }' },
50
+
description: 'The current color in OKLab format.',
51
+
bindable: true
52
+
},
53
+
okhsv: {
54
+
type: { type: 'object', definition: '{ h: number; s: number; v: number }' },
55
+
description: 'The current color in OKHsv format.',
56
+
bindable: true
57
+
},
58
+
onchange: {
59
+
type: { type: 'function', definition: '(color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void' },
60
+
description: 'Callback invoked when the color changes.'
61
+
},
62
+
quickSelects: {
63
+
type: { type: 'array', definition: '{ label: string; rgb?: RGB; oklab?: OKlab; okhsv?: OKhsv }[]' },
64
+
description: 'Quick-select color swatches.',
65
+
default: '[]',
66
+
bindable: true
67
+
},
68
+
side: {
69
+
type: { type: 'enum', definition: "'top' | 'right' | 'bottom' | 'left'" },
70
+
description: 'The preferred side of the trigger to render the popover.',
71
+
default: "'bottom'"
72
+
},
73
+
sideOffset: {
74
+
type: 'number',
75
+
description: 'The distance in pixels from the trigger.',
76
+
default: '10'
77
+
},
78
+
class: {
79
+
type: 'string',
80
+
description: 'Additional CSS classes to apply.'
81
+
}
82
+
}
83
+
}
84
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/colors/color-picker/index.ts
+2
apps/docs/src/lib/docs/colors/color-picker/index.ts
+43
apps/docs/src/lib/docs/colors/color-select/api.ts
+43
apps/docs/src/lib/docs/colors/color-select/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ColorSelect',
6
+
description: 'A group of color swatches that allows selecting a single color.',
7
+
props: {
8
+
colors: {
9
+
type: { type: 'array', definition: "(string | { class?: string; label: string; value?: string })[]" },
10
+
description: 'The list of selectable colors. Can be simple strings or objects with custom class, label, and value.',
11
+
required: true,
12
+
bindable: true
13
+
},
14
+
selected: {
15
+
type: { type: 'union', definition: "string | { class?: string; label: string; value?: string }" },
16
+
description: 'The currently selected color. Defaults to the first color.',
17
+
bindable: true
18
+
},
19
+
name: {
20
+
type: 'string',
21
+
description: 'The name attribute for the underlying radio inputs (auto-generated if not provided).',
22
+
bindable: true
23
+
},
24
+
onselected: {
25
+
type: { type: 'function', definition: '(color: Color, previous: Color) => void' },
26
+
description: 'Callback invoked when the selected color changes.'
27
+
},
28
+
colorsClass: {
29
+
type: 'string',
30
+
description: 'Additional CSS classes for the color swatches container.'
31
+
},
32
+
class: {
33
+
type: 'string',
34
+
description: 'Additional CSS classes to apply to the root element.'
35
+
},
36
+
ref: {
37
+
type: 'HTMLDivElement',
38
+
description: 'The underlying DOM element.',
39
+
bindable: true
40
+
}
41
+
}
42
+
}
43
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/colors/color-select/index.ts
+2
apps/docs/src/lib/docs/colors/color-select/index.ts
+38
apps/docs/src/lib/docs/text/advanced-text-area/api.ts
+38
apps/docs/src/lib/docs/text/advanced-text-area/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'AdvancedTextArea',
6
+
description: 'A textarea with optional additional content area and action buttons, suitable for composing posts or messages.',
7
+
props: {
8
+
value: {
9
+
type: 'string',
10
+
description: 'The current text value.',
11
+
bindable: true
12
+
},
13
+
placeholder: {
14
+
type: 'string',
15
+
description: 'Placeholder text.',
16
+
default: "'Write something here...'"
17
+
},
18
+
rows: {
19
+
type: 'number',
20
+
description: 'The number of visible text rows.',
21
+
default: '3'
22
+
},
23
+
additionalContent: {
24
+
type: 'Snippet',
25
+
description: 'Additional content to display below the textarea (e.g. media previews).'
26
+
},
27
+
actionButtons: {
28
+
type: 'Snippet',
29
+
description: 'Action buttons displayed in the bottom-left area (e.g. attach, emoji).'
30
+
},
31
+
submitButton: {
32
+
type: { type: 'union', definition: "Snippet | string | null" },
33
+
description: 'The submit button. Can be a string label, a custom snippet, or null to hide.',
34
+
default: "'Post'"
35
+
}
36
+
}
37
+
}
38
+
] satisfies APISchema[];
+3
-1
apps/docs/src/lib/docs/text/advanced-text-area/index.ts
+3
-1
apps/docs/src/lib/docs/text/advanced-text-area/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: 'advanced-text-area',
7
8
title: 'Advanced Text Area',
8
9
docs: Docs,
9
10
example: Example,
10
-
card: Card
11
+
card: Card,
12
+
api,
11
13
};
+48
apps/docs/src/lib/docs/text/plain-text-editor/api.ts
+48
apps/docs/src/lib/docs/text/plain-text-editor/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'PlainTextEditor',
6
+
description: 'A plain text editor powered by TipTap, with optional single-line mode.',
7
+
props: {
8
+
value: {
9
+
type: 'string',
10
+
description: 'The current text content.',
11
+
default: "''",
12
+
bindable: true
13
+
},
14
+
placeholder: {
15
+
type: 'string',
16
+
description: 'Placeholder text.',
17
+
default: "''"
18
+
},
19
+
allowMultiline: {
20
+
type: 'boolean',
21
+
description: 'Whether to allow multiple lines of text.',
22
+
default: 'false'
23
+
},
24
+
editor: {
25
+
type: 'Editor',
26
+
description: 'The TipTap Editor instance.',
27
+
bindable: true
28
+
},
29
+
onupdate: {
30
+
type: { type: 'function', definition: '(value: string) => void' },
31
+
description: 'Callback invoked when the text content changes.'
32
+
},
33
+
ontransaction: {
34
+
type: { type: 'function', definition: '() => void' },
35
+
description: 'Callback invoked on every TipTap transaction.'
36
+
},
37
+
class: {
38
+
type: 'string',
39
+
description: 'Additional CSS classes to apply.'
40
+
},
41
+
ref: {
42
+
type: 'HTMLElement',
43
+
description: 'The underlying DOM element.',
44
+
bindable: true
45
+
}
46
+
}
47
+
}
48
+
] satisfies APISchema[];
+9
-1
apps/docs/src/lib/docs/text/plain-text-editor/index.ts
+9
-1
apps/docs/src/lib/docs/text/plain-text-editor/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: 'plain-text-editor',
7
8
title: 'Plain Text Editor',
8
9
docs: Docs,
9
10
example: Example,
10
-
card: Card
11
+
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://tiptap.dev/',
16
+
label: 'TipTap'
17
+
}
18
+
]
11
19
};
+43
apps/docs/src/lib/docs/text/rich-text-editor/api.ts
+43
apps/docs/src/lib/docs/text/rich-text-editor/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'RichTextEditor',
6
+
description: 'A rich text editor powered by TipTap with a formatting toolbar, slash commands, and markdown support.',
7
+
props: {
8
+
content: {
9
+
type: 'Content',
10
+
description: 'The editor content (TipTap Content type - can be HTML string, JSON, etc.).',
11
+
default: '{}',
12
+
bindable: true
13
+
},
14
+
placeholder: {
15
+
type: 'string',
16
+
description: 'Placeholder text.',
17
+
default: "'Write or press / for commands'"
18
+
},
19
+
editor: {
20
+
type: 'Readable<Editor>',
21
+
description: 'A Svelte readable store containing the TipTap Editor instance.',
22
+
bindable: true
23
+
},
24
+
onupdate: {
25
+
type: { type: 'function', definition: '(content: Content, context: { editor: Editor; transaction: Transaction }) => void' },
26
+
description: 'Callback invoked when the editor content changes.'
27
+
},
28
+
ontransaction: {
29
+
type: { type: 'function', definition: '() => void' },
30
+
description: 'Callback invoked on every TipTap transaction.'
31
+
},
32
+
class: {
33
+
type: 'string',
34
+
description: 'Additional CSS classes to apply.'
35
+
},
36
+
ref: {
37
+
type: 'HTMLDivElement',
38
+
description: 'The underlying DOM element.',
39
+
bindable: true
40
+
}
41
+
}
42
+
}
43
+
] satisfies APISchema[];
+9
-1
apps/docs/src/lib/docs/text/rich-text-editor/index.ts
+9
-1
apps/docs/src/lib/docs/text/rich-text-editor/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: 'rich-text-editor',
7
8
title: 'Rich Text Editor',
8
9
docs: Docs,
9
10
example: Example,
10
-
card: Card
11
+
card: Card,
12
+
api,
13
+
sources: [
14
+
{
15
+
href: 'https://tiptap.dev/',
16
+
label: 'TipTap'
17
+
}
18
+
]
11
19
};
+29
apps/docs/src/lib/docs/time/relative-time/api.ts
+29
apps/docs/src/lib/docs/time/relative-time/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'RelativeTime',
6
+
description: 'Displays a timestamp as a human-readable relative time string (e.g. "5 minutes ago") that updates live.',
7
+
props: {
8
+
date: {
9
+
type: { type: 'union', definition: 'Date | number' },
10
+
description: 'The date to display relative to now. Can be a Date object or a Unix timestamp.',
11
+
required: true
12
+
},
13
+
locale: {
14
+
type: 'string',
15
+
description: "The locale for formatting (e.g. 'en', 'de').",
16
+
required: true
17
+
},
18
+
live: {
19
+
type: 'boolean',
20
+
description: 'Whether to automatically update the displayed time.',
21
+
default: 'true'
22
+
},
23
+
class: {
24
+
type: 'string',
25
+
description: 'Additional CSS classes to apply.'
26
+
}
27
+
}
28
+
}
29
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/time/relative-time/index.ts
+2
apps/docs/src/lib/docs/time/relative-time/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: 'relative-time',
···
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/CaptainCodeman/svelte-relative-time',
+39
apps/docs/src/lib/docs/time/stopwatch/api.ts
+39
apps/docs/src/lib/docs/time/stopwatch/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Stopwatch',
6
+
description: 'A stopwatch display with animated digits. Bind to the stopwatch prop to control it programmatically (start, pause, resume, reset).',
7
+
props: {
8
+
stopwatch: {
9
+
type: 'StopwatchState',
10
+
description: 'The stopwatch state object. Provides methods: start(), pause(), resume(), reset(), and properties: isRunning, isPaused, elapsed.',
11
+
bindable: true
12
+
},
13
+
showHours: {
14
+
type: 'boolean',
15
+
description: 'Whether to display the hours digits.',
16
+
default: 'false'
17
+
},
18
+
showMinutes: {
19
+
type: 'boolean',
20
+
description: 'Whether to display the minutes digits.',
21
+
default: 'true'
22
+
},
23
+
showSeconds: {
24
+
type: 'boolean',
25
+
description: 'Whether to display the seconds digits.',
26
+
default: 'true'
27
+
},
28
+
class: {
29
+
type: 'string',
30
+
description: 'Additional CSS classes to apply.'
31
+
},
32
+
ref: {
33
+
type: 'HTMLDivElement',
34
+
description: 'The underlying DOM element.',
35
+
bindable: true
36
+
}
37
+
}
38
+
}
39
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/time/stopwatch/index.ts
+2
apps/docs/src/lib/docs/time/stopwatch/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: 'stopwatch',
···
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/joshnuss/svelte-reactive-timer',
+39
apps/docs/src/lib/docs/time/timer/api.ts
+39
apps/docs/src/lib/docs/time/timer/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Timer',
6
+
description: 'A countdown timer display with animated digits. Bind to the timer prop to control it programmatically (start, pause, resume, reset).',
7
+
props: {
8
+
timer: {
9
+
type: 'TimerState',
10
+
description: 'The timer state object. Constructor takes duration in ms (default 10 minutes). Provides methods: start(), pause(), resume(), reset(), and properties: isRunning, isPaused, remaining.',
11
+
bindable: true
12
+
},
13
+
showHours: {
14
+
type: 'boolean',
15
+
description: 'Whether to display the hours digits.',
16
+
default: 'false'
17
+
},
18
+
showMinutes: {
19
+
type: 'boolean',
20
+
description: 'Whether to display the minutes digits.',
21
+
default: 'true'
22
+
},
23
+
showSeconds: {
24
+
type: 'boolean',
25
+
description: 'Whether to display the seconds digits.',
26
+
default: 'true'
27
+
},
28
+
class: {
29
+
type: 'string',
30
+
description: 'Additional CSS classes to apply.'
31
+
},
32
+
ref: {
33
+
type: 'HTMLDivElement',
34
+
description: 'The underlying DOM element.',
35
+
bindable: true
36
+
}
37
+
}
38
+
}
39
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/time/timer/index.ts
+2
apps/docs/src/lib/docs/time/timer/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: 'timer',
···
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/joshnuss/svelte-reactive-timer',
+20
apps/docs/src/lib/docs/visual/confetti/api.ts
+20
apps/docs/src/lib/docs/visual/confetti/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'launchConfetti',
6
+
description: 'A function (not a component) that launches a confetti animation using theme colors. Import and call it directly.',
7
+
props: {
8
+
color: {
9
+
type: 'string',
10
+
description: "The theme color name to use for confetti particles (e.g. 'accent', 'red', 'blue').",
11
+
default: "'accent'"
12
+
},
13
+
brightnesses: {
14
+
type: { type: 'array', definition: '(50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950)[]' },
15
+
description: 'The brightness levels of the color to use for confetti particles.',
16
+
default: '[300, 400, 500, 800]'
17
+
}
18
+
}
19
+
}
20
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/visual/confetti/index.ts
+2
apps/docs/src/lib/docs/visual/confetti/index.ts
+37
apps/docs/src/lib/docs/visual/excalidraw/api.ts
+37
apps/docs/src/lib/docs/visual/excalidraw/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Excalidraw',
6
+
description: 'Renders an Excalidraw SVG drawing with optional caption.',
7
+
props: {
8
+
svg: {
9
+
type: 'string',
10
+
description: 'The Excalidraw SVG content as a string.',
11
+
required: true
12
+
},
13
+
alt: {
14
+
type: 'string',
15
+
description: 'Alt text for the drawing.',
16
+
required: true
17
+
},
18
+
caption: {
19
+
type: 'string',
20
+
description: 'Optional caption text displayed below the drawing.'
21
+
},
22
+
captionClass: {
23
+
type: 'string',
24
+
description: 'Additional CSS classes for the caption element.'
25
+
},
26
+
class: {
27
+
type: 'string',
28
+
description: 'Additional CSS classes to apply.'
29
+
},
30
+
ref: {
31
+
type: 'HTMLElement',
32
+
description: 'The underlying DOM element.',
33
+
bindable: true
34
+
}
35
+
}
36
+
}
37
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/visual/excalidraw/index.ts
+2
apps/docs/src/lib/docs/visual/excalidraw/index.ts
+34
apps/docs/src/lib/docs/visual/image-masonry/api.ts
+34
apps/docs/src/lib/docs/visual/image-masonry/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'ImageMasonry',
6
+
description: 'A responsive masonry grid layout for images with optional names and click interactions.',
7
+
props: {
8
+
images: {
9
+
type: { type: 'array', definition: '{ src: string; name: string; href?: string; width?: number; height?: number; onclick?: () => void; alt?: string }[]' },
10
+
description: 'The array of images to display.',
11
+
required: true
12
+
},
13
+
interactive: {
14
+
type: 'boolean',
15
+
description: 'Whether images have hover effects and are clickable.',
16
+
default: 'true'
17
+
},
18
+
maxColumns: {
19
+
type: 'number',
20
+
description: 'The maximum number of columns in the masonry grid.',
21
+
default: '4'
22
+
},
23
+
showNames: {
24
+
type: 'boolean',
25
+
description: 'Whether to show image names below each image.',
26
+
default: 'true'
27
+
},
28
+
class: {
29
+
type: 'string',
30
+
description: 'Additional CSS classes to apply.'
31
+
}
32
+
}
33
+
}
34
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/visual/image-masonry/index.ts
+2
apps/docs/src/lib/docs/visual/image-masonry/index.ts
+19
apps/docs/src/lib/docs/visual/phone/api.ts
+19
apps/docs/src/lib/docs/visual/phone/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Phone',
6
+
description: 'A decorative phone frame that wraps content to simulate a mobile device display.',
7
+
props: {
8
+
children: {
9
+
type: 'Snippet',
10
+
description: 'The content to display inside the phone frame.',
11
+
required: true
12
+
},
13
+
class: {
14
+
type: 'string',
15
+
description: 'Additional CSS classes to apply.'
16
+
}
17
+
}
18
+
}
19
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/visual/phone/index.ts
+2
apps/docs/src/lib/docs/visual/phone/index.ts
+32
apps/docs/src/lib/docs/visual/quote/api.ts
+32
apps/docs/src/lib/docs/visual/quote/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Quote',
6
+
description: 'A styled blockquote with optional author avatar and attribution.',
7
+
props: {
8
+
quote: {
9
+
type: 'string',
10
+
description: 'The quote text.'
11
+
},
12
+
author: {
13
+
type: { type: 'object', definition: '{ src?: string; alt?: string; fallback?: string; role?: string; name?: string; avatarClass?: string; fallbackClass?: string; imageClass?: string }' },
14
+
description: 'The author information including avatar and name.'
15
+
},
16
+
useThemeColor: {
17
+
type: 'boolean',
18
+
description: 'Whether to apply theme color styling to the author avatar.',
19
+
default: 'false'
20
+
},
21
+
class: {
22
+
type: 'string',
23
+
description: 'Additional CSS classes to apply.'
24
+
},
25
+
ref: {
26
+
type: 'HTMLDivElement',
27
+
description: 'The underlying DOM element.',
28
+
bindable: true
29
+
}
30
+
}
31
+
}
32
+
] satisfies APISchema[];
+2
apps/docs/src/lib/docs/visual/quote/index.ts
+2
apps/docs/src/lib/docs/visual/quote/index.ts
+47
apps/docs/src/lib/docs/visual/undraw/api.ts
+47
apps/docs/src/lib/docs/visual/undraw/api.ts
···
1
+
import type { APISchema } from '$lib/types/schema';
2
+
3
+
export default [
4
+
{
5
+
title: 'Undraw',
6
+
description: 'Renders an unDraw SVG illustration with optional color remapping and dark mode inversion.',
7
+
props: {
8
+
svg: {
9
+
type: 'string',
10
+
description: 'The unDraw SVG content as a string.',
11
+
required: true
12
+
},
13
+
alt: {
14
+
type: 'string',
15
+
description: 'Alt text for the illustration.',
16
+
required: true
17
+
},
18
+
caption: {
19
+
type: 'string',
20
+
description: 'Optional caption text displayed below the illustration.'
21
+
},
22
+
captionClass: {
23
+
type: 'string',
24
+
description: 'Additional CSS classes for the caption element.'
25
+
},
26
+
autoInvert: {
27
+
type: 'boolean',
28
+
description: 'Whether to automatically invert colors in dark mode.',
29
+
default: 'false'
30
+
},
31
+
colorMap: {
32
+
type: { type: 'object', definition: 'Record<string, string>' },
33
+
description: 'A mapping of original SVG colors to replacement colors.',
34
+
default: '{}'
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[];
+2
apps/docs/src/lib/docs/visual/undraw/index.ts
+2
apps/docs/src/lib/docs/visual/undraw/index.ts
+24
-2
apps/docs/src/routes/(main)/components/[category]/[slug]/+page.svelte
+24
-2
apps/docs/src/routes/(main)/components/[category]/[slug]/+page.svelte
···
4
4
import { Prose, Button } from '@foxui/all';
5
5
import Api from '$lib/site-components/API.svelte';
6
6
import type { ComponentDoc } from '$lib/types/schema';
7
+
import { resolve } from '$app/paths';
7
8
8
9
type ModuleEntry = {
9
10
default: ComponentDoc;
···
27
28
<Prose>
28
29
<div class="flex items-end gap-4">
29
30
<h1 class="my-0!">{componentDoc.title}</h1>
30
-
<Button size="sm" class="not-prose mb-1" variant="secondary" href="/components/{category}/{slug}/llms.txt" target="_blank">
31
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m5 16-3 3 3 3"/><path d="m9 22 3-3-3-3"/></svg>
31
+
<Button
32
+
size="sm"
33
+
class="not-prose mb-1"
34
+
variant="secondary"
35
+
href={resolve(`/components/${category}/${slug}/llms.txt`)}
36
+
target="_blank"
37
+
>
38
+
<svg
39
+
xmlns="http://www.w3.org/2000/svg"
40
+
width="16"
41
+
height="16"
42
+
viewBox="0 0 24 24"
43
+
fill="none"
44
+
stroke="currentColor"
45
+
stroke-width="2"
46
+
stroke-linecap="round"
47
+
stroke-linejoin="round"
48
+
><path
49
+
d="M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35"
50
+
/><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="m5 16-3 3 3 3" /><path
51
+
d="m9 22 3-3-3-3"
52
+
/></svg
53
+
>
32
54
<span>llms.txt</span>
33
55
</Button>
34
56
</div>