@foxui/social 0.4.6 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/components/animated-emoji-picker/EmojiPicker.svelte +120 -0
  2. package/dist/components/animated-emoji-picker/EmojiPicker.svelte.d.ts +11 -0
  3. package/dist/components/animated-emoji-picker/PopoverEmojiPicker.svelte +24 -0
  4. package/dist/components/animated-emoji-picker/PopoverEmojiPicker.svelte.d.ts +11 -0
  5. package/dist/components/animated-emoji-picker/emoji.d.ts +7 -0
  6. package/dist/components/animated-emoji-picker/emoji.js +56 -0
  7. package/dist/components/animated-emoji-picker/icons.json +10259 -0
  8. package/dist/components/animated-emoji-picker/index.d.ts +2 -0
  9. package/dist/components/animated-emoji-picker/index.js +2 -0
  10. package/dist/components/{bluesky-login/BlueskyLogin.svelte → atproto-login/AtprotoLogin.svelte} +4 -4
  11. package/dist/components/atproto-login/AtprotoLogin.svelte.d.ts +4 -0
  12. package/dist/components/atproto-login/AtprotoLoginModal.svelte +129 -0
  13. package/dist/components/atproto-login/AtprotoLoginModal.svelte.d.ts +9 -0
  14. package/dist/components/atproto-login/index.d.ts +9 -0
  15. package/dist/components/atproto-login/index.js +3 -0
  16. package/dist/components/index.d.ts +2 -1
  17. package/dist/components/index.js +2 -1
  18. package/package.json +31 -31
  19. package/dist/components/bluesky-login/BlueskyLogin.svelte.d.ts +0 -4
  20. package/dist/components/bluesky-login/BlueskyLoginModal.svelte +0 -141
  21. package/dist/components/bluesky-login/BlueskyLoginModal.svelte.d.ts +0 -9
  22. package/dist/components/bluesky-login/index.d.ts +0 -8
  23. package/dist/components/bluesky-login/index.js +0 -3
@@ -0,0 +1,2 @@
1
+ export { default as AnimatedEmojiPicker } from './EmojiPicker.svelte';
2
+ export { default as PopoverAnimatedEmojiPicker } from './PopoverEmojiPicker.svelte';
@@ -0,0 +1,2 @@
1
+ export { default as AnimatedEmojiPicker } from './EmojiPicker.svelte';
2
+ export { default as PopoverAnimatedEmojiPicker } from './PopoverEmojiPicker.svelte';
@@ -1,11 +1,11 @@
1
1
  <script lang="ts">
2
2
  import { Button } from '@foxui/core';
3
- import { BlueskyLoginModal, blueskyLoginModalState, type BlueskyLoginProps } from '.';
3
+ import { AtprotoLoginModal, atProtoLoginModalState, type ATProtoLoginProps } from '.';
4
4
 
5
- let { login, formAction, formMethod }: BlueskyLoginProps = $props();
5
+ let { login, formAction, formMethod }: ATProtoLoginProps = $props();
6
6
  </script>
7
7
 
8
- <Button onclick={() => blueskyLoginModalState.show()}>
8
+ <Button onclick={() => atProtoLoginModalState.show()}>
9
9
  <svg
10
10
  fill="currentColor"
11
11
  xmlns="http://www.w3.org/2000/svg"
@@ -20,4 +20,4 @@
20
20
  Login
21
21
  </Button>
22
22
 
23
- <BlueskyLoginModal {login} {formAction} {formMethod} />
23
+ <AtprotoLoginModal {login} {formAction} {formMethod} />
@@ -0,0 +1,4 @@
1
+ import { type ATProtoLoginProps } from '.';
2
+ declare const AtprotoLogin: import("svelte").Component<ATProtoLoginProps, {}, "">;
3
+ type AtprotoLogin = ReturnType<typeof AtprotoLogin>;
4
+ export default AtprotoLogin;
@@ -0,0 +1,129 @@
1
+ <script lang="ts" module>
2
+ export const atProtoLoginModalState = $state({
3
+ open: false,
4
+ show: () => (atProtoLoginModalState.open = true),
5
+ hide: () => (atProtoLoginModalState.open = false)
6
+ });
7
+ </script>
8
+
9
+ <script lang="ts">
10
+ import { Button, Modal, Subheading, Input, Avatar } from '@foxui/core';
11
+ import type { ATProtoLoginProps } from '.';
12
+
13
+ let value = $state('');
14
+ let error: string | null = $state(null);
15
+ let loading = $state(false);
16
+
17
+ let { login, signup, formAction, formMethod = 'get' }: ATProtoLoginProps = $props();
18
+
19
+ async function onLogin(handle: string) {
20
+ if (loading || !login) return;
21
+
22
+ loading = true;
23
+ error = null;
24
+
25
+ try {
26
+ const hide = await login(handle);
27
+
28
+ if (hide) {
29
+ atProtoLoginModalState.hide();
30
+ value = '';
31
+ }
32
+ } catch (err) {
33
+ error = err instanceof Error ? err.message : String(err);
34
+ } finally {
35
+ loading = false;
36
+ }
37
+ }
38
+
39
+ async function onSubmit(evt: Event) {
40
+ if (formAction || !login) return;
41
+ evt.preventDefault();
42
+
43
+ await onLogin(value);
44
+ }
45
+
46
+ let input: HTMLInputElement | null = $state(null);
47
+
48
+ let lastLogin: { handle: string; avatar: string } | null = $state(null);
49
+
50
+ $effect(() => {
51
+ let lastLoginDid = localStorage.getItem('last-login');
52
+
53
+ if (lastLoginDid) {
54
+ let profile = localStorage.getItem(`profile-${lastLoginDid}`);
55
+
56
+ if (profile) {
57
+ lastLogin = JSON.parse(profile);
58
+ }
59
+ }
60
+ });
61
+ </script>
62
+
63
+ <Modal
64
+ bind:open={atProtoLoginModalState.open}
65
+ class="max-w-sm gap-2 p-4 sm:p-6"
66
+ onOpenAutoFocus={(e: Event) => {
67
+ e.preventDefault();
68
+ input?.focus();
69
+ }}
70
+ >
71
+ <form onsubmit={onSubmit} action={formAction} method={formMethod} class="flex flex-col gap-2">
72
+ <Subheading class="inline-flex items-center gap-2 font-bold">
73
+ Login with your internet handle</Subheading
74
+ >
75
+ <div class="mt-1 text-xs font-light text-neutral-800 dark:text-neutral-200">
76
+ e.g. your bluesky account
77
+ </div>
78
+
79
+ {#if lastLogin}
80
+ <Button
81
+ class="max-w-xs justify-start truncate overflow-x-hidden"
82
+ variant="primary"
83
+ onclick={() => onLogin(lastLogin?.handle ?? '')}
84
+ disabled={loading}
85
+ >
86
+ <Avatar src={lastLogin.avatar} class="size-6" />
87
+
88
+ <div
89
+ class="text-accent-600 dark:text-accent-400 text-md max-w-full truncate overflow-x-hidden font-semibold"
90
+ >
91
+ <p>{loading ? 'Loading...' : lastLogin.handle}</p>
92
+ </div>
93
+ </Button>
94
+ {/if}
95
+
96
+ <div class="mt-4 w-full">
97
+ <div class="mt-2">
98
+ <Input
99
+ bind:ref={input}
100
+ type="text"
101
+ placeholder="you.bsky.social"
102
+ class="w-full"
103
+ bind:value
104
+ />
105
+ </div>
106
+ </div>
107
+
108
+ {#if error}
109
+ <p class="text-accent-500 mt-2 text-sm font-medium">{error}</p>
110
+ {/if}
111
+
112
+ <Button type="submit" class="mt-2 ml-auto w-full" disabled={loading}
113
+ >{loading ? 'Loading...' : 'Login'}</Button
114
+ >
115
+ {#if signup}
116
+ <div
117
+ class="border-base-200 dark:border-base-800 text-base-800 dark:text-base-200 mt-4 flex flex-col gap-3 border-t pt-4 text-sm leading-7"
118
+ >
119
+ <span>Don't have an account?</span>
120
+ <Button
121
+ onclick={() => {
122
+ signup?.();
123
+ }}
124
+ variant="secondary">Sign Up</Button
125
+ >
126
+ </div>
127
+ {/if}
128
+ </form>
129
+ </Modal>
@@ -0,0 +1,9 @@
1
+ export declare const atProtoLoginModalState: {
2
+ open: boolean;
3
+ show: () => true;
4
+ hide: () => false;
5
+ };
6
+ import type { ATProtoLoginProps } from '.';
7
+ declare const AtprotoLoginModal: import("svelte").Component<ATProtoLoginProps, {}, "">;
8
+ type AtprotoLoginModal = ReturnType<typeof AtprotoLoginModal>;
9
+ export default AtprotoLoginModal;
@@ -0,0 +1,9 @@
1
+ export { default as AtprotoLoginModal } from './AtprotoLoginModal.svelte';
2
+ export { atProtoLoginModalState } from './AtprotoLoginModal.svelte';
3
+ export { default as AtprotoLogin } from './AtprotoLogin.svelte';
4
+ export type ATProtoLoginProps = {
5
+ login?: (handle: string) => Promise<boolean | undefined>;
6
+ signup?: () => Promise<boolean | undefined>;
7
+ formAction?: string;
8
+ formMethod?: 'dialog' | 'get' | 'post' | 'DIALOG' | 'GET' | 'POST' | null;
9
+ };
@@ -0,0 +1,3 @@
1
+ export { default as AtprotoLoginModal } from './AtprotoLoginModal.svelte';
2
+ export { atProtoLoginModalState } from './AtprotoLoginModal.svelte';
3
+ export { default as AtprotoLogin } from './AtprotoLogin.svelte';
@@ -1,4 +1,4 @@
1
- export * from './bluesky-login';
1
+ export * from './atproto-login';
2
2
  export * from './post';
3
3
  export * from './star-rating';
4
4
  export * from './social-icons';
@@ -10,4 +10,5 @@ export * from './emoji-picker';
10
10
  export * from './bluesky-post';
11
11
  export * from './nested-comments';
12
12
  export * from './link-card';
13
+ export * from './animated-emoji-picker';
13
14
  export declare function numberToHumanReadable(number: number): string | number;
@@ -1,4 +1,4 @@
1
- export * from './bluesky-login';
1
+ export * from './atproto-login';
2
2
  export * from './post';
3
3
  export * from './star-rating';
4
4
  export * from './social-icons';
@@ -10,6 +10,7 @@ export * from './emoji-picker';
10
10
  export * from './bluesky-post';
11
11
  export * from './nested-comments';
12
12
  export * from './link-card';
13
+ export * from './animated-emoji-picker';
13
14
  export function numberToHumanReadable(number) {
14
15
  if (number < 1000) {
15
16
  return number;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@foxui/social",
3
3
  "private": false,
4
- "version": "0.4.6",
4
+ "version": "0.4.8",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"
@@ -18,40 +18,40 @@
18
18
  "types": "./dist/types.d.ts",
19
19
  "svelte": "./dist/index.js",
20
20
  "devDependencies": {
21
- "@eslint/compat": "^1.2.5",
22
- "@eslint/js": "^9.18.0",
23
- "@sveltejs/adapter-auto": "^6.0.0",
24
- "@sveltejs/adapter-static": "^3.0.8",
25
- "@sveltejs/kit": "^2.16.0",
26
- "@sveltejs/package": "^2.3.11",
27
- "@sveltejs/vite-plugin-svelte": "^5.0.0",
28
- "@tailwindcss/forms": "^0.5.9",
29
- "@tailwindcss/typography": "^0.5.15",
30
- "@tailwindcss/vite": "^4.1.5",
31
- "eslint": "^9.18.0",
32
- "eslint-config-prettier": "^10.0.1",
33
- "eslint-plugin-svelte": "^3.0.0",
34
- "globals": "^16.0.0",
35
- "prettier": "^3.4.2",
36
- "prettier-plugin-svelte": "^3.3.3",
37
- "prettier-plugin-tailwindcss": "^0.6.11",
38
- "svelte": "^5.0.0",
39
- "svelte-check": "^4.0.0",
40
- "tailwindcss": "^4.1.5",
41
- "typescript": "^5.0.0",
42
- "typescript-eslint": "^8.20.0",
43
- "vite": "^6.2.6"
21
+ "@eslint/compat": "^2.0.2",
22
+ "@eslint/js": "^10.0.1",
23
+ "@sveltejs/adapter-auto": "^7.0.1",
24
+ "@sveltejs/adapter-static": "^3.0.10",
25
+ "@sveltejs/kit": "^2.53.0",
26
+ "@sveltejs/package": "^2.5.7",
27
+ "@sveltejs/vite-plugin-svelte": "^6.2.4",
28
+ "@tailwindcss/forms": "^0.5.11",
29
+ "@tailwindcss/typography": "^0.5.19",
30
+ "@tailwindcss/vite": "^4.2.0",
31
+ "eslint": "^10.0.1",
32
+ "eslint-config-prettier": "^10.1.8",
33
+ "eslint-plugin-svelte": "^3.15.0",
34
+ "globals": "^17.3.0",
35
+ "prettier": "^3.8.1",
36
+ "prettier-plugin-svelte": "^3.5.0",
37
+ "prettier-plugin-tailwindcss": "^0.7.2",
38
+ "svelte": "^5.53.2",
39
+ "svelte-check": "^4.4.3",
40
+ "tailwindcss": "^4.2.0",
41
+ "typescript": "^5.9.3",
42
+ "typescript-eslint": "^8.56.0",
43
+ "vite": "^7.3.1"
44
44
  },
45
45
  "dependencies": {
46
- "@atproto/api": "^0.15.5",
46
+ "@atproto/api": "^0.18.21",
47
47
  "@use-gesture/vanilla": "^10.3.1",
48
- "bits-ui": "^1.4.3",
49
- "emoji-picker-element": "^1.26.3",
50
- "hls.js": "^1.6.2",
48
+ "bits-ui": "^2.16.2",
49
+ "emoji-picker-element": "^1.29.0",
50
+ "hls.js": "^1.6.15",
51
51
  "is-emoji-supported": "^0.0.5",
52
- "plyr": "^3.7.8",
53
- "@foxui/core": "0.4.6",
54
- "@foxui/time": "0.4.6"
52
+ "plyr": "^3.8.4",
53
+ "@foxui/core": "0.4.8",
54
+ "@foxui/time": "0.4.8"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "svelte": ">=5",
@@ -1,4 +0,0 @@
1
- import { type BlueskyLoginProps } from '.';
2
- declare const BlueskyLogin: import("svelte").Component<BlueskyLoginProps, {}, "">;
3
- type BlueskyLogin = ReturnType<typeof BlueskyLogin>;
4
- export default BlueskyLogin;
@@ -1,141 +0,0 @@
1
- <script lang="ts" module>
2
- export const blueskyLoginModalState = $state({
3
- open: false,
4
- show: () => (blueskyLoginModalState.open = true),
5
- hide: () => (blueskyLoginModalState.open = false)
6
- });
7
- </script>
8
-
9
- <script lang="ts">
10
- import { Button, Modal, Subheading, Label, Input, Avatar } from '@foxui/core';
11
- import type { BlueskyLoginProps } from '.';
12
-
13
- let value = $state('');
14
- let error: string | null = $state(null);
15
- let loading = $state(false);
16
-
17
- let { login, formAction, formMethod = 'get' }: BlueskyLoginProps = $props();
18
-
19
- async function onLogin(handle: string) {
20
- if (loading || !login) return;
21
-
22
- loading = true;
23
- error = null;
24
-
25
- try {
26
- const hide = await login(handle);
27
-
28
- if (hide) {
29
- blueskyLoginModalState.hide();
30
- value = '';
31
- }
32
- } catch (err) {
33
- error = err instanceof Error ? err.message : String(err);
34
- } finally {
35
- loading = false;
36
- }
37
- }
38
-
39
- async function onSubmit(evt: Event) {
40
- if (formAction || !login) return;
41
- evt.preventDefault();
42
-
43
- await onLogin(value);
44
- }
45
-
46
- let input: HTMLInputElement | null = $state(null);
47
-
48
- let lastLogin: { handle: string; avatar: string } | null = $state(null);
49
-
50
- $effect(() => {
51
- let lastLoginDid = localStorage.getItem('last-login');
52
-
53
- if (lastLoginDid) {
54
- let profile = localStorage.getItem(`profile-${lastLoginDid}`);
55
-
56
- if (profile) {
57
- lastLogin = JSON.parse(profile)
58
- }
59
- }
60
- });
61
- </script>
62
-
63
- <Modal
64
- bind:open={blueskyLoginModalState.open}
65
- class="max-w-sm gap-2 p-4 sm:p-6"
66
- onOpenAutoFocus={(e: Event) => {
67
- e.preventDefault();
68
- input?.focus();
69
- }}
70
- >
71
- <form onsubmit={onSubmit} action={formAction} method={formMethod} class="flex flex-col gap-2">
72
- <Subheading class="mb-1 inline-flex items-center gap-2 text-xl font-bold">
73
- <svg
74
- fill="currentColor"
75
- xmlns="http://www.w3.org/2000/svg"
76
- viewBox="-40 -40 680 620"
77
- version="1.1"
78
- class={['text-accent-600 dark:text-accent-400 size-6']}
79
- aria-hidden="true"
80
- >
81
- <path
82
- d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
83
- />
84
- </svg>
85
- Login with Bluesky</Subheading
86
- >
87
-
88
- <div class="text-base-600 dark:text-base-400 text-xs leading-5">
89
- Don't have an account?
90
- <br />
91
- <a
92
- href="https://bsky.app"
93
- target="_blank"
94
- class="text-accent-600 dark:text-accent-400 dark:hover:text-accent-500 hover:text-accent-500 font-medium transition-colors"
95
- >
96
- Sign up on bluesky
97
- </a>, then come back here.
98
- </div>
99
-
100
- {#if lastLogin}
101
- <Label for="bluesky-handle" class="mt-4 text-sm">Recent login:</Label>
102
- <Button
103
- class="max-w-xs overflow-x-hidden justify-start truncate"
104
- variant="primary"
105
- onclick={() => onLogin(lastLogin?.handle ?? '')}
106
- disabled={loading}
107
- >
108
- <Avatar src={lastLogin.avatar} class="size-6" />
109
-
110
- <div
111
- class="text-accent-600 dark:text-accent-400 text-md max-w-full truncate overflow-x-hidden font-semibold"
112
- >
113
- <p>{loading ? 'Loading...' : lastLogin.handle}</p>
114
- </div>
115
- </Button>
116
- {/if}
117
-
118
- <div class="mt-4 w-full">
119
- <Label for="bluesky-handle" class="text-sm">Your handle</Label>
120
- <div class="mt-2">
121
- <Input
122
- bind:ref={input}
123
- type="text"
124
- name="bluesky-handle"
125
- id="bluesky-handle"
126
- placeholder="yourname.bsky.social"
127
- class="w-full"
128
- bind:value
129
- />
130
- </div>
131
- </div>
132
-
133
- {#if error}
134
- <p class="text-accent-500 mt-2 text-sm font-medium">{error}</p>
135
- {/if}
136
-
137
- <Button type="submit" class="mt-2 ml-auto w-full md:w-auto" disabled={loading}
138
- >{loading ? 'Loading...' : 'Login'}</Button
139
- >
140
- </form>
141
- </Modal>
@@ -1,9 +0,0 @@
1
- export declare const blueskyLoginModalState: {
2
- open: boolean;
3
- show: () => true;
4
- hide: () => false;
5
- };
6
- import type { BlueskyLoginProps } from '.';
7
- declare const BlueskyLoginModal: import("svelte").Component<BlueskyLoginProps, {}, "">;
8
- type BlueskyLoginModal = ReturnType<typeof BlueskyLoginModal>;
9
- export default BlueskyLoginModal;
@@ -1,8 +0,0 @@
1
- export { default as BlueskyLoginModal } from './BlueskyLoginModal.svelte';
2
- export { blueskyLoginModalState } from './BlueskyLoginModal.svelte';
3
- export { default as BlueskyLogin } from './BlueskyLogin.svelte';
4
- export type BlueskyLoginProps = {
5
- login?: (handle: string) => Promise<boolean | undefined>;
6
- formAction?: string;
7
- formMethod?: 'dialog' | 'get' | 'post' | 'DIALOG' | 'GET' | 'POST' | null;
8
- };
@@ -1,3 +0,0 @@
1
- export { default as BlueskyLoginModal } from './BlueskyLoginModal.svelte';
2
- export { blueskyLoginModalState } from './BlueskyLoginModal.svelte';
3
- export { default as BlueskyLogin } from './BlueskyLogin.svelte';