[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
improve atproto login handle, remove advanced text editor from docs
+468
-385
+5
.changeset/afraid-rules-hear.md
+5
.changeset/afraid-rules-hear.md
+5
apps/docs/src/lib/later/advanced-text-area/Card.svelte
+5
apps/docs/src/lib/later/advanced-text-area/Card.svelte
+19
apps/docs/src/lib/later/advanced-text-area/Documentation.md
+19
apps/docs/src/lib/later/advanced-text-area/Documentation.md
···
1
+
## Usage
2
+
3
+
```svelte
4
+
<script lang="ts">
5
+
import { AdvancedTextArea } from '@foxui/text';
6
+
7
+
let content = $state('');
8
+
9
+
const handleSubmit = (e: Event) => {
10
+
e.preventDefault();
11
+
console.log(content);
12
+
};
13
+
</script>
14
+
15
+
<form onsubmit={handleSubmit}>
16
+
<AdvancedTextArea bind:value={content} placeholder="Write something..." />
17
+
</form>
18
+
19
+
```
+67
apps/docs/src/lib/later/advanced-text-area/Example.svelte
+67
apps/docs/src/lib/later/advanced-text-area/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Box, Button, toast } from '@foxui/all';
3
+
import { AdvancedTextArea } from '@foxui/all';
4
+
5
+
let content = $state('');
6
+
7
+
function handleSubmit(e: Event) {
8
+
if (!content) {
9
+
toast.error('Please enter a post');
10
+
return;
11
+
}
12
+
content = '';
13
+
14
+
e.preventDefault();
15
+
toast.success('Post submitted');
16
+
}
17
+
</script>
18
+
19
+
<form class="not-prose" onsubmit={handleSubmit}>
20
+
<AdvancedTextArea bind:value={content}>
21
+
{#snippet actionButtons()}
22
+
<Button
23
+
variant="ghost"
24
+
size="icon"
25
+
onclick={() => {
26
+
toast('Sorry, I was too lazy to actually add this feature to this demo');
27
+
}}
28
+
>
29
+
<svg
30
+
xmlns="http://www.w3.org/2000/svg"
31
+
fill="none"
32
+
viewBox="0 0 24 24"
33
+
stroke-width="1.5"
34
+
stroke="currentColor"
35
+
>
36
+
<path
37
+
stroke-linecap="round"
38
+
stroke-linejoin="round"
39
+
d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
40
+
/>
41
+
</svg>
42
+
</Button>
43
+
<Button
44
+
variant="ghost"
45
+
size="icon"
46
+
onclick={() => {
47
+
toast('Sorry, I was too lazy to actually add this feature to this demo');
48
+
}}
49
+
>
50
+
<svg
51
+
xmlns="http://www.w3.org/2000/svg"
52
+
fill="none"
53
+
viewBox="0 0 24 24"
54
+
stroke-width="1.5"
55
+
stroke="currentColor"
56
+
class="size-6"
57
+
>
58
+
<path
59
+
stroke-linecap="round"
60
+
stroke-linejoin="round"
61
+
d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
62
+
/>
63
+
</svg>
64
+
</Button>
65
+
{/snippet}
66
+
</AdvancedTextArea>
67
+
</form>
+38
apps/docs/src/lib/later/advanced-text-area/api.ts
+38
apps/docs/src/lib/later/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[];
+13
apps/docs/src/lib/later/advanced-text-area/index.ts
+13
apps/docs/src/lib/later/advanced-text-area/index.ts
···
1
+
import Docs from './Documentation.md';
2
+
import Example from './Example.svelte';
3
+
import Card from './Card.svelte';
4
+
import api from './api';
5
+
6
+
export default {
7
+
slug: 'advanced-text-area',
8
+
title: 'Advanced Text Area',
9
+
docs: Docs,
10
+
example: Example,
11
+
card: Card,
12
+
api,
13
+
};
-5
apps/docs/src/lib/docs/text/advanced-text-area/Card.svelte
-5
apps/docs/src/lib/docs/text/advanced-text-area/Card.svelte
-19
apps/docs/src/lib/docs/text/advanced-text-area/Documentation.md
-19
apps/docs/src/lib/docs/text/advanced-text-area/Documentation.md
···
1
-
## Usage
2
-
3
-
```svelte
4
-
<script lang="ts">
5
-
import { AdvancedTextArea } from '@foxui/text';
6
-
7
-
let content = $state('');
8
-
9
-
const handleSubmit = (e: Event) => {
10
-
e.preventDefault();
11
-
console.log(content);
12
-
};
13
-
</script>
14
-
15
-
<form onsubmit={handleSubmit}>
16
-
<AdvancedTextArea bind:value={content} placeholder="Write something..." />
17
-
</form>
18
-
19
-
```
-67
apps/docs/src/lib/docs/text/advanced-text-area/Example.svelte
-67
apps/docs/src/lib/docs/text/advanced-text-area/Example.svelte
···
1
-
<script lang="ts">
2
-
import { Box, Button, toast } from '@foxui/all';
3
-
import { AdvancedTextArea } from '@foxui/all';
4
-
5
-
let content = $state('');
6
-
7
-
function handleSubmit(e: Event) {
8
-
if (!content) {
9
-
toast.error('Please enter a post');
10
-
return;
11
-
}
12
-
content = '';
13
-
14
-
e.preventDefault();
15
-
toast.success('Post submitted');
16
-
}
17
-
</script>
18
-
19
-
<form class="not-prose" onsubmit={handleSubmit}>
20
-
<AdvancedTextArea bind:value={content}>
21
-
{#snippet actionButtons()}
22
-
<Button
23
-
variant="ghost"
24
-
size="icon"
25
-
onclick={() => {
26
-
toast('Sorry, I was too lazy to actually add this feature to this demo');
27
-
}}
28
-
>
29
-
<svg
30
-
xmlns="http://www.w3.org/2000/svg"
31
-
fill="none"
32
-
viewBox="0 0 24 24"
33
-
stroke-width="1.5"
34
-
stroke="currentColor"
35
-
>
36
-
<path
37
-
stroke-linecap="round"
38
-
stroke-linejoin="round"
39
-
d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
40
-
/>
41
-
</svg>
42
-
</Button>
43
-
<Button
44
-
variant="ghost"
45
-
size="icon"
46
-
onclick={() => {
47
-
toast('Sorry, I was too lazy to actually add this feature to this demo');
48
-
}}
49
-
>
50
-
<svg
51
-
xmlns="http://www.w3.org/2000/svg"
52
-
fill="none"
53
-
viewBox="0 0 24 24"
54
-
stroke-width="1.5"
55
-
stroke="currentColor"
56
-
class="size-6"
57
-
>
58
-
<path
59
-
stroke-linecap="round"
60
-
stroke-linejoin="round"
61
-
d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
62
-
/>
63
-
</svg>
64
-
</Button>
65
-
{/snippet}
66
-
</AdvancedTextArea>
67
-
</form>
-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[];
-13
apps/docs/src/lib/docs/text/advanced-text-area/index.ts
-13
apps/docs/src/lib/docs/text/advanced-text-area/index.ts
···
1
-
import Docs from './Documentation.md';
2
-
import Example from './Example.svelte';
3
-
import Card from './Card.svelte';
4
-
import api from './api';
5
-
6
-
export default {
7
-
slug: 'advanced-text-area',
8
-
title: 'Advanced Text Area',
9
-
docs: Docs,
10
-
example: Example,
11
-
card: Card,
12
-
api,
13
-
};