@foxui/social 0.4.0

package/dist/components/swiper-cards/CardSwiper.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Snippet } from 'svelte';
+import type { CardData, Direction, SwipeEventData } from '.';
+type $$ComponentProps = {
+    card?: Snippet<[CardData]>;
+    cardData: (index: number) => CardData;
+    onswipe?: (cardInfo: SwipeEventData) => void;
+    swipe?: (direction: Direction) => void;
+    minSwipeDistance?: number;
+    minSwipeVelocity?: number;
+    arrowKeys?: boolean;
+    thresholdPassed?: number;
+    anchor?: number | null;
+    rotate?: boolean;
+    cardCount?: number;
+};
+declare const CardSwiper: import("svelte").Component<$$ComponentProps, {}, "swipe" | "thresholdPassed">;
+type CardSwiper = ReturnType<typeof CardSwiper>;
+export default CardSwiper;

package/dist/components/swiper-cards/index.d.ts

@@ -0,0 +1,14 @@
+export type CardData = {
+    title?: string;
+    description?: string;
+    image?: string;
+    [key: string]: unknown;
+};
+export type SwipeEventData = {
+    direction: Direction;
+    data: CardData;
+    index: number;
+    element: HTMLElement;
+};
+export type Direction = 'left' | 'right';
+export { default as CardSwiper } from './CardSwiper.svelte';

package/dist/components/swiper-cards/index.js

@@ -0,0 +1 @@
+export { default as CardSwiper } from './CardSwiper.svelte';

package/dist/components/user-profile/UserProfile.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Avatar, Button, cn } from '@foxui/core';
+
+	let { profile, class: className }: { profile: {
+		banner?: string;
+		avatar?: string;
+		displayName?: string;
+		handle?: string;
+		description?: string;
+	}, class: string; } = $props();
+</script>
+
+{#if profile}
+	<div class={cn("mx-auto max-w-full sm:max-w-2xl sm:py-6", className)}>
+		<div>
+			{#if profile.banner}
+				<img
+					class="aspect-[3/1] w-full border-b border-base-800 object-cover sm:rounded-xl sm:border"
+					src={profile.banner}
+					alt=""
+				/>
+			{:else}
+				<div class="aspect-[8/1] w-full"></div>
+			{/if}
+		</div>
+		<div
+			class={cn(
+				profile.banner ? '-mt-11' : '-mt-8',
+				'flex max-w-full items-end space-x-5 px-4 sm:-mt-16 sm:px-6 lg:px-8'
+			)}
+		>
+			<Avatar src={profile.avatar} class="border-base-50 dark:border-base-950 border-2 size-24 sm:size-32" />
+			<div
+				class="flex min-w-0 flex-1 flex-row sm:flex-row sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
+			>
+				<div
+					class={cn(
+						profile.banner ? 'mt-4 sm:mt-0' : '-mt-[4.5rem] sm:-mt-[6.5rem]',
+						'flex min-w-0 max-w-full flex-1 flex-col items-baseline'
+					)}
+				>
+					<h1
+						class="max-w-full truncate text-lg font-bold text-base-900 dark:text-base-100 sm:text-xl"
+					>
+						{profile.displayName || profile.handle}
+					</h1>
+					<div class="truncate text-xs text-base-900 dark:text-base-400 sm:text-sm">
+						{profile.handle}
+					</div>
+				</div>
+			</div>
+
+			<!-- <Button>Follow</Button> -->
+		</div>
+
+		<div class="px-4 sm:px-6 lg:px-8 py-4 text-xs sm:text-sm text-base-800 dark:text-base-200">
+			{@html profile.description?.replaceAll('\n', '<br/>')}
+		</div>
+	</div>
+{/if}

package/dist/components/user-profile/UserProfile.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    profile: {
+        banner?: string;
+        avatar?: string;
+        displayName?: string;
+        handle?: string;
+        description?: string;
+    };
+    class: string;
+};
+declare const UserProfile: import("svelte").Component<$$ComponentProps, {}, "">;
+type UserProfile = ReturnType<typeof UserProfile>;
+export default UserProfile;

package/dist/components/user-profile/index.d.ts

@@ -0,0 +1 @@
+export { default as UserProfile } from './UserProfile.svelte';

package/dist/components/user-profile/index.js

@@ -0,0 +1 @@
+export { default as UserProfile } from './UserProfile.svelte';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@foxui/social",
+  "private": false,
+  "version": "0.4.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/types.d.ts",
+  "svelte": "./dist/index.js",
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.5",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.5",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6"
+  },
+  "dependencies": {
+    "@atproto/api": "^0.15.5",
+    "@use-gesture/vanilla": "^10.3.1",
+    "bits-ui": "^1.4.3",
+    "emoji-picker-element": "^1.26.3",
+    "hls.js": "^1.6.2",
+    "is-emoji-supported": "^0.0.5",
+    "plyr": "^3.7.8",
+    "@foxui/core": "0.4.0",
+    "@foxui/time": "0.4.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=5",
+    "tailwindcss": ">=3"
+  },
+  "description": "ui kit - svelte 5 + tailwind 4 - social components",
+  "homepage": "https://flo-bit.dev/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flo-bit/ui-kit.git"
+  },
+  "author": "flo-bit (http://flo-bit.dev/)",
+  "bugs": "https://github.com/flo-bit/ui-kit/issues",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "build:package": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}